Pin a specific rmlui commit

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" />

assets/styles/main.rcss

@@ -1,4 +1,3 @@
-
 * {
     box-sizing: border-box;
     font-family: "Hubballi";
@@ -13,19 +12,22 @@
     --border-dark: #191a1b;        
 }
 
+/* ==========================================================================
+   Mobile-First Base Styles (scaled via dp)
+   ========================================================================== */
+
 body {
     display: block;
     width: 100vw;
     height: 100vh;
-    font-size: 15pt;
+    font-size: 12dp;
     background-color: var(--background-color);
     color: var(--foreground-color);
-    margin: 0px;
+    margin: 0dp;
-    padding: 24px;
+    padding: 12dp;
 }
 
 /* Generic Structural Layout Defaults */
-
 div, section, article, header, footer, main, nav, aside {
     display: block;
 }
@@ -37,39 +39,37 @@ span, em, strong, a {
 /* Typographic Defaults */
 p {
     display: block;
-    margin: 0px;
+    margin: 0dp;
 }
 
 h1, h2, h3, h4, h5, h6 {
     display: block;
     font-weight: bold;
-    margin: 0px;
+    margin: 0dp;
 }
 
-h1 { font-size: 2em; }
+h1 { font-size: 1.6em; }
 h2 { font-size: 1.5em; }
 h3 { font-size: 1.17em; }
 
 em { font-style: italic; }
 strong { font-weight: bold; }
 
-/* ==========================================================================
+/* Form Inputs & Interactive UI Components */
-   Form Inputs & Interactive UI Components
-   ========================================================================== */
 button, input, select, textarea {
     display: inline-block;
     font-family: "Hubballi";
-    font-size: 14pt;
+    font-size: 14dp;
-    margin: 0px;
+    margin: 0dp;
     vertical-align: middle;
 }
 
 button {
-    padding: 6px 16px;
+    padding: 6dp 16dp;
     background-color: var(--accent-green);
     color: var(--foreground-color);
-    border: 3px var(--border-dark);
+    border: 3dp var(--border-dark);
-    border-radius: 6px;
+    border-radius: 6dp;
     text-align: center;
     font-weight: bold;
 }
@@ -84,11 +84,11 @@ button:active {
 }
 
 input[type="text"], textarea {
-    padding: 8px 12px;
+    padding: 8dp 12dp;
     background-color: #212325;
     color: var(--foreground-color);
-    border: 3px var(--border-dark);
+    border: 3dp var(--border-dark);
-    border-radius: 6px;
+    border-radius: 6dp;
     width: 100%;
 }
 
@@ -99,58 +99,56 @@ input[type="text"]:focus, textarea:focus {
 
 textarea {
     display: block;
-    height: 150px;
+    height: 120dp;
 }
 
-/*  ===================================
+/* App Header */
-    App Header
-    =================================== */
 #header {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    padding: 12px 20px;
+    padding: 10dp 14dp;
     background-color: var(--accent-green);
-    border: 3px var(--border-dark);
+    border: 3dp var(--border-dark);
-    border-radius: 8px;
+    border-radius: 8dp;
-    margin-bottom: 24px;
+    margin-bottom: 14dp;
 }
 
 .header-title-group {
     display: flex;
     flex-direction: row;
     align-items: baseline;
-    gap: 16px;
+    gap: 12dp;
 }
 
 #header h1 {
-    font-size: 2.5em;
+    font-size: 1.6em;
     color: var(--foreground-color);
-    letter-spacing: 1px;
+    letter-spacing: 1dp;
 }
 
 .header-tag {
-    font-size: 12pt;
+    font-size: 10dp;
     font-weight: bold;
     background-color: var(--border-dark);
     color: var(--accent-gold);
-    padding: 2px 10px;
+    padding: 2dp 10dp;
-    border-radius: 12px;
+    border-radius: 12dp;
 }
 
 #new-critter-btn {
-    height: 48px;
+    height: 40dp;
-    width: 48px;
+    width: 40dp;
-    border-radius: 8px;
+    border-radius: 8dp;
-    font-size: 28pt;
+    font-size: 20dp;
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 3px var(--border-dark);
+    border: 3dp var(--border-dark);
     background-color: var(--accent-gold);
     color: var(--border-dark);
-    padding: 0px;
+    padding: 0dp;
 }
 
 #new-critter-btn:hover {
@@ -158,13 +156,11 @@ textarea {
     color: var(--foreground-color);
 }
 
-/*  ===================================
+/* Drawer List Styles */
-    Drawer List Styles
-    =================================== */
 .critter-list {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 8dp;
 }
 
 .critter-card {
@@ -173,12 +169,12 @@ textarea {
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    padding: 8px 14px;
+    padding: 8dp 10dp;
     background-color: var(--card-bg);
     color: var(--foreground-color);
-    border: 3px var(--border-dark);
+    border: 3dp var(--border-dark);
-    border-left: 10px var(--accent-green);
+    border-left: 10dp var(--accent-green);
-    border-radius: 6px;
+    border-radius: 6dp;
     text-align: left;
 }
 
@@ -191,43 +187,43 @@ textarea {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 14px;
+    gap: 10dp;
     flex: 1;
 }
 
 .thumb-frame {
     background-color: var(--accent-green);
-    border: 2px var(--border-dark);
+    border: 2dp var(--border-dark);
-    border-radius: 4px;
+    border-radius: 4dp;
-    padding: 2px;
+    padding: 2dp;
 }
 
 .critter-thumb {
-    width: 50px;
+    width: 40dp;
-    height: 50px;
+    height: 40dp;
 }
 
 .critter-info {
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: 2dp;
     flex: 1;
 }
 
 .critter-card-header {
     display: flex;
     align-items: baseline;
-    gap: 12px;
+    gap: 10dp;
 }
 
 .critter-name {
-    font-size: 18pt;
+    font-size: 14dp;
-    margin: 0px;
+    margin: 0dp;
     color: var(--foreground-color);
 }
 
 .critter-id {
-    font-size: 11pt;
+    font-size: 9dp;
     font-weight: bold;
     color: var(--accent-gold);
 }
@@ -235,39 +231,37 @@ textarea {
 .info-pills {
     display: flex;
     flex-direction: row;
-    gap: 8px;
+    gap: 8dp;
 }
 
 .pill {
-    font-size: 12pt;
+    font-size: 10dp;
     background-color: #212325;
     color: var(--foreground-color);
-    border: 1px var(--accent-green);
+    border: 1dp var(--accent-green);
-    padding: 1px 8px;
+    padding: 1dp 6dp;
-    border-radius: 4px;
+    border-radius: 4dp;
 }
 
 .btn-delete {
-    padding: 4px 10px;
+    padding: 3dp 8dp;
-    font-size: 11pt;
+    font-size: 9dp;
     font-weight: bold;
     background-color: var(--accent-clay);
     color: #ffffff;
-    border: 2px var(--border-dark);
+    border: 2dp var(--border-dark);
-    border-radius: 4px;
+    border-radius: 4dp;
 }
 
 .btn-delete:hover {
     background-color: #a3561a;
 }
 
-/*  ===================================
+/* Modals Layout */
-    Modals Layout
-    =================================== */
 .modal-overlay {
     position: absolute;
-    top: 0px;
+    top: 0dp;
-    left: 0px;
+    left: 0dp;
     width: 100%;
     height: 100%;
     background-color: #1f1f1fdd;
@@ -279,55 +273,55 @@ textarea {
 .modal-content {
     background-color: var(--card-bg);
     color: var(--foreground-color);
-    border: 4px var(--border-dark);
+    border: 4dp var(--border-dark);
-    border-radius: 10px;
+    border-radius: 10dp;
-    width: 600px;
+    width: 94vw;
-    padding: 0px;
+    padding: 0dp;
     display: flex;
     flex-direction: column;
 }
 
 .modal-content-small {
-    width: 450px;
+    width: 88vw;
 }
 
 .modal-header {
     background-color: var(--accent-green);
     color: #ffffff;
-    padding: 12px 20px;
+    padding: 10dp 16px;
-    border-bottom: 3px var(--border-dark);
+    border-bottom: 3dp var(--border-dark);
 }
 
 .modal-header h2 {
-    font-size: 20pt;
+    font-size: 16dp;
     color: #ffffff;
 }
 
 .modal-body {
-    padding: 18px 20px;
+    padding: 14dp 16px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10dp;
 }
 
 .form-group {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 4dp;
 }
 
 .form-row {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    gap: 12px;
+    gap: 10dp;
 }
 
 .form-group.half {
-    width: 50%;
+    width: 100%;
 }
 
 .modal-content label {
-    font-size: 14pt;
+    font-size: 12dp;
     font-weight: bold;
     color: var(--foreground-color);
 }
@@ -335,32 +329,32 @@ textarea {
 .error {
     color: #ffffff;
     font-weight: bold;
-    padding: 8px;
+    padding: 8dp;
-    border: 2px var(--border-dark);
+    border: 2dp var(--border-dark);
     background-color: var(--accent-clay);
-    border-radius: 4px;
+    border-radius: 4dp;
 }
 
 .dialog-text {
-    font-size: 18pt;
+    font-size: 14dp;
     color: var(--foreground-color);
-    padding: 10px 0px;
+    padding: 10dp 0dp;
 }
 
 .modal-buttons {
-    padding: 14px 20px;
+    padding: 12dp 16px;
     background-color: #2b2d2f;
-    border-top: 3px var(--border-dark);
+    border-top: 3dp var(--border-dark);
     display: flex;
     flex-direction: row;
-    gap: 12px;
+    gap: 12dp;
     justify-content: flex-end;
 }
 
 .modal-buttons button {
-    min-width: 120px;
+    min-width: 90dp;
-    height: 42px;
+    height: 38dp;
-    font-size: 16pt;
+    font-size: 13dp;
 }
 
 .btn-cancel {
@@ -380,3 +374,143 @@ textarea {
 .btn-submit:hover {
     background-color: var(--accent-bright-green);
 }
+
+/* Extra Narrow Viewports (< 380dp) */
+@media (max-width: 380dp) {
+    #header h1 {
+        font-size: 1.3em;
+    }
+
+    .critter-name {
+        font-size: 12dp;
+    }
+
+    .info-pills {
+        flex-direction: column;
+        gap: 4dp;
+    }
+}
+
+/* ==========================================================================
+   Desktop / Larger Screens Media Query (Min-Width >= 600dp)
+   ========================================================================== */
+@media (min-width: 600dp) {
+    body {
+        padding: 24dp;
+        font-size: 15dp;
+    }
+
+    textarea {
+        height: 150dp;
+    }
+
+    #header {
+        padding: 12dp 20px;
+        margin-bottom: 24dp;
+    }
+
+    .header-title-group {
+        gap: 16dp;
+    }
+
+    #header h1 {
+        font-size: 2.5em;
+    }
+
+    .header-tag {
+        font-size: 12dp;
+    }
+
+    #new-critter-btn {
+        height: 48dp;
+        width: 48dp;
+        font-size: 28dp;
+    }
+
+    .critter-list {
+        gap: 10dp;
+    }
+
+    .critter-card {
+        padding: 8dp 14dp;
+    }
+
+    .critter-card-body {
+        gap: 14dp;
+    }
+
+    .critter-thumb {
+        width: 50dp;
+        height: 50dp;
+    }
+
+    .critter-card-header {
+        gap: 12dp;
+    }
+
+    .critter-name {
+        font-size: 18dp;
+    }
+
+    .critter-id {
+        font-size: 11dp;
+    }
+
+    .pill {
+        font-size: 12dp;
+        padding: 1dp 8dp;
+    }
+
+    .btn-delete {
+        padding: 4dp 10dp;
+        font-size: 11dp;
+    }
+
+    .modal-content {
+        width: 600dp;
+    }
+
+    .modal-content-small {
+        width: 450dp;
+    }
+
+    .modal-header {
+        padding: 12dp 20px;
+    }
+
+    .modal-header h2 {
+        font-size: 20dp;
+    }
+
+    .modal-body {
+        padding: 18dp 20px;
+        gap: 12px;
+    }
+
+    .form-row {
+        flex-direction: row;
+        gap: 12dp;
+    }
+
+    .form-group.half {
+        width: 50%;
+    }
+
+    .modal-content label {
+        font-size: 14dp;
+    }
+
+    .dialog-text {
+        font-size: 18dp;
+    }
+
+    .modal-buttons {
+        padding: 14px 20px;
+    }
+
+    .modal-buttons button {
+        min-width: 120dp;
+        height: 42dp;
+        font-size: 16dp;
+    }
+}

flake.nix

@@ -19,13 +19,13 @@
 
         rmlui = pkgs.stdenv.mkDerivation rec {
           pname = "rmlui";
-          version = "master";
+          version = "6.2-unstable-2026-8-7";
 
           src = pkgs.fetchFromGitHub {
             owner = "mikke89";
             repo = "RmlUi";
-            rev = "master";
+            rev = "9cbb5440de3e86e7031544c26116fe7b814028b9";
-            hash = "sha256-vfFtjNHw7coXWrGgtcFyuIsu5rctW5dBJoOt8MTZwDU=";
+            hash = "sha256-5vyrVJhmNE/msJuVSESsKhiW9Pc+peA0NTYJDVoRanA=";
           };
 
           nativeBuildInputs = [

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,51 @@ 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);
+                
+                float display_scale = SDL_GetWindowDisplayScale(windows[0]);
+                
+                if (Rml::Vector2i(current_width, current_height) != ctx->GetDimensions()) {
+                    ctx->SetDimensions(Rml::Vector2i(current_width, current_height));
+                }
+                
+                if (display_scale != ctx->GetDensityIndependentPixelRatio()) {
+                    ctx->SetDensityIndependentPixelRatio(display_scale);
+                }
+            }
+            SDL_free(windows);
+        }
+        
         handle_input();
         ctx->Update();
         Backend::BeginFrame();
         ctx->Render();
         Backend::PresentFrame();
     }
+
     shutdown();
     return 0;
 }