Attempting to style for mobile

android/app/src/main/AndroidManifest.xml

@@ -14,7 +14,8 @@
             android:label="Critterfolio"
             android:configChanges="orientation|screenSize|keyboardHidden"
             android:exported="true"
-            android:screenOrientation="fullSensor">
+            android:screenOrientation="fullSensor"
+            android:theme="@android:style/Theme.Black.NoTitleBar">
 
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
@@ -22,4 +23,4 @@
             </intent-filter>
         </activity>
     </application>
-</manifest>
+</manifest>

assets/styles/main.rcss

@@ -379,4 +379,127 @@ textarea {
 
 .btn-submit:hover {
     background-color: var(--accent-bright-green);
-}
+}
+
+/*  ===================================
+    Small Screen Media Queries
+    =================================== */
+@media (max-width: 600dp) {
+    body {
+        padding: 12px;
+        font-size: 12pt;
+    }
+
+    #header {
+        padding: 10px 14px;
+        margin-bottom: 14px;
+    }
+
+    #header h1 {
+        font-size: 1.6em;
+    }
+
+    .header-tag {
+        font-size: 10pt;
+    }
+
+    #new-critter-btn {
+        height: 40px;
+        width: 40px;
+        font-size: 20pt;
+    }
+
+    .critter-list {
+        gap: 8px;
+    }
+
+    .critter-card {
+        padding: 8px 10px;
+    }
+
+    .critter-card-body {
+        gap: 10px;
+    }
+
+    .critter-thumb {
+        width: 40px;
+        height: 40px;
+    }
+
+    .critter-name {
+        font-size: 14pt;
+    }
+
+    .critter-id {
+        font-size: 9pt;
+    }
+
+    .pill {
+        font-size: 10pt;
+        padding: 1px 6px;
+    }
+
+    .btn-delete {
+        padding: 3px 8px;
+        font-size: 9pt;
+    }
+
+    .modal-content {
+        width: 94vw;
+    }
+
+    .modal-content-small {
+        width: 88vw;
+    }
+
+    .modal-header h2 {
+        font-size: 16pt;
+    }
+
+    .modal-body {
+        padding: 14px 16px;
+        gap: 10px;
+    }
+
+    .form-row {
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .form-group.half {
+        width: 100%;
+    }
+
+    .modal-content label {
+        font-size: 12pt;
+    }
+
+    .modal-buttons {
+        padding: 12px 16px;
+    }
+
+    .modal-buttons button {
+        min-width: 90px;
+        height: 38px;
+        font-size: 13pt;
+    }
+
+    .dialog-text {
+        font-size: 14pt;
+    }
+}
+
+@media (max-width: 380dp) {
+    #header h1 {
+        font-size: 1.3em;
+    }
+
+    .critter-name {
+        font-size: 12pt;
+    }
+
+    .info-pills {
+        flex-direction: column;
+        gap: 4px;
+    }
+}

src/main.cpp

@@ -14,6 +14,7 @@
 #include <iostream>
 #include <map>
 #include <vector>
+
 static bool is_initalized = false;
 static bool is_running = false;
 static Rml::Context *ctx = nullptr;
@@ -22,48 +23,85 @@ static std::vector<CritterEntry> critter_list;
 static Rml::ElementDocument *doc;
 static AppData app_data;
 static SDLFileInterface file_interface;
+
 void shutdown() {
     Rml::Shutdown();
     Backend::Shutdown();
     SDL_Quit();
 }
+
 bool initialize() {
     if (!SDL_Init(SDL_INIT_VIDEO | SDL_INIT_EVENTS)) {
         std::cout << "[ERROR] Failed to initialize SDL3: " << SDL_GetError() << "\n";
         return false;
     }
+
     if (!Backend::Initialize("CritterFolio", 800, 600, true)) {
         std::cout << "[ERROR] Failed to initialize backend.\n";
         return false;
     }
     std::cout << "[INFO] RmlUI Backend initialized.\n";
+
     Rml::SetSystemInterface(Backend::GetSystemInterface());
     Rml::SetRenderInterface(Backend::GetRenderInterface());
     Rml::SetFileInterface(&file_interface);
     Rml::Initialise();
     Rml::Lua::Initialise();
+
     std::cout << "[INFO] Preparing local DB...\n";
     if (!ensure_db_copied()) {
         std::cout << "[ERROR] Could not prepare local DB.\n";
         return false;
     }
+
     std::cout << "[INFO] Loading local DB...\n";
     if (!db_get_all_critters(critters)) {
         std::cout << "[ERROR] Local DB failed to initialize.\n";
         return false;
     }
     std::cout << "[INFO] Local DB initialized.\n";
+
     sync_map_to_list(critters, critter_list);
-    ctx = Rml::CreateContext("main", Rml::Vector2i(800, 600));
+
+    int window_width = 800;
+    int window_height = 600;
+    {
+        int window_count = 0;
+        SDL_Window **windows = SDL_GetWindows(&window_count);
+        if (windows && window_count > 0) {
+            SDL_GetWindowSize(windows[0], &window_width, &window_height);
+        }
+        SDL_free(windows);
+    }
+
+    ctx = Rml::CreateContext("main", Rml::Vector2i(window_width, window_height));
+    std::cout << "[INFO] Context created at " << window_width << "x" << window_height << "\n";
+
+    {
+        int window_count = 0;
+        SDL_Window **windows = SDL_GetWindows(&window_count);
+        if (windows && window_count > 0) {
+            float display_scale = SDL_GetWindowDisplayScale(windows[0]);
+            ctx->SetDensityIndependentPixelRatio(display_scale);
+            SDL_Log("Display scale (dp ratio): %f", display_scale);
+        }
+        SDL_free(windows);
+    }
+    
+    SDL_Log("Context created at %dx%d", window_width, window_height);
     if (!ctx) {
         std::cout << "[ERROR] Failed to create context.\n";
         return false;
     }
     std::cout << "[INFO] Main context initialized.\n";
+
     Rml::LoadFontFace("./assets/fonts/Hubballi-Regular.ttf");
+
     Rml::Debugger::Initialise(ctx);
+
     return true;
 }
+
 bool load_document() {
     doc = ctx->LoadDocument("./assets/main.rml");
     if (!doc) {
@@ -75,6 +113,7 @@ bool load_document() {
     doc->Show();
     return true;
 }
+
 bool reload_doc() {
     if (doc) {
         Rml::Factory::ClearStyleSheetCache();
@@ -87,6 +126,7 @@ bool reload_doc() {
     }
     return true;
 }
+
 bool f5_was_pressed = false;
 bool f8_was_pressed = false;
 void handle_input() {
@@ -109,8 +149,10 @@ void handle_input() {
         }
     }
 }
+
 int main(int arc, char *argv[]) {
     std::cout << "[INFO] Starting CritterFolio...\n";
+
     is_initalized = initialize();
     if (!is_initalized) {
         std::cout << "[ERROR] Failed to initialize, shutting down.\n";
@@ -118,25 +160,44 @@ int main(int arc, char *argv[]) {
         return 1;
     }
     is_running = true;
+
     Rml::DataModelHandle app_data_handle;
+
     if (!setup_data_binding(ctx, app_data_handle, app_data, critter_list, critters)) {
         shutdown();
         return 1;
     }
+
     if (!load_document()) {
         shutdown();
         return 1;
     }
+
     std::cout << "[INFO] Main page loaded.\n";
 
     while (is_running) {
         is_running = Backend::ProcessEvents(ctx);
+
+        {
+            int window_count = 0;
+            SDL_Window **windows = SDL_GetWindows(&window_count);
+            if (windows && window_count > 0) {
+                int current_width = 0, current_height = 0;
+                SDL_GetWindowSize(windows[0], &current_width, &current_height);
+                if (Rml::Vector2i(current_width, current_height) != ctx->GetDimensions()) {
+                    ctx->SetDimensions(Rml::Vector2i(current_width, current_height));
+                }
+            }
+            SDL_free(windows);
+        }
+        
         handle_input();
         ctx->Update();
         Backend::BeginFrame();
         ctx->Render();
         Backend::PresentFrame();
     }
+
     shutdown();
     return 0;
 }