From dffad20e2fe2f3472e3005e0cd8d376bf361669d Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Mon, 10 Nov 2025 21:15:54 +0000
Subject: [PATCH] fix: correct mobile action bar layout with internal flexbox
 distribution
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PROBLEM:
- Previous grid approach (50% 30%) didn't work correctly
- Language selector is INSIDE .site-title div, not a separate grid column
- Grid structure: .site-title | .view-controls-center | .action-buttons-right

SOLUTION @ 540px:
Grid Structure:
- Changed .action-bar-content to single column (1fr)
- Hide .view-controls-center and .action-buttons-right
- .site-title becomes the only visible element

Flexbox Inside .site-title:
- .site-title: display: flex, justify-content: space-between
- .site-title-left: flex: 1 1 55% (hamburger + title area)
  * Contains hamburger button and CV JAMR title
  * flex-grow allows expansion, flex-shrink allows contraction
- .language-selector: flex: 0 0 35% (language buttons)
  * Fixed at ~35% width, doesn't grow or shrink
  * justify-content: flex-end (align buttons to right)

Text Overflow Protection:
- .site-title-link: overflow: hidden
- .site-title-text: white-space: nowrap, text-overflow: ellipsis
- Prevents title from breaking layout

RESULT:
Mobile distribution:
✓ Hamburger + Title area: ~55% (flexible)
✓ Language selector (EN/ES): ~35% (fixed)
✓ Remaining ~10%: gaps and padding
✓ Visual result: approximately 50% / 30% with breathing room

BENEFITS:
- Proper space distribution matching internal HTML structure
- Language buttons have adequate touch targets
- Title can truncate gracefully if needed
- All controls still accessible via hamburger menu
---
 static/css/main.css | 73 ++++++++++++++++++++++++++++++++-------------
 1 file changed, 52 insertions(+), 21 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 6d39f27..cc3bb96 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -3347,11 +3347,11 @@ html {
    ======================================== */
 
 @media (max-width: 540px) {
-    /* Adjust action bar grid for mobile: 50% hamburger/title, 30% language */
+    /* Simplify action bar grid for mobile: single column */
     .action-bar-content {
-        grid-template-columns: 50% 30%;
-        gap: 0.5rem;
-        padding: 0 0.5rem;
+        grid-template-columns: 1fr;
+        gap: 0;
+        padding: 0;
     }
 
     /* Hide center controls on mobile (moved to hamburger menu) */
@@ -3359,6 +3359,54 @@ html {
         display: none;
     }
 
+    /* Hide action buttons on small screens (available in hamburger menu) */
+    .action-buttons-right {
+        display: none;
+    }
+
+    /* Site title uses flexbox with percentage widths */
+    .site-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        padding: 0 0.5rem;
+        gap: 0.5rem;
+    }
+
+    /* Left group (hamburger + title) takes ~50-60% */
+    .site-title-left {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex: 1 1 55%;
+        min-width: 0;
+    }
+
+    /* Title link is flexible within left group */
+    .site-title-link {
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    .site-title-text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    /* Language selector takes ~30-35% */
+    .language-selector {
+        display: flex;
+        flex: 0 0 35%;
+        margin-left: auto;
+        padding-left: 0;
+        margin-right: 0;
+        justify-content: flex-end;
+        gap: 0.25rem;
+    }
+
     /* Hide year from title in mobile view */
     .site-title-year {
         display: none;
@@ -3373,23 +3421,6 @@ html {
         display: inline-flex;
     }
 
-    /* Align language selector to the right */
-    .site-title {
-        justify-content: space-between;
-        width: 100%;
-    }
-
-    .language-selector {
-        margin-left: auto;
-        padding-left: 0;
-        margin-right: 0rem;
-    }
-
-    /* Hide action buttons on small screens (available in hamburger menu) */
-    .action-buttons-right {
-        display: none;
-    }
-
     /* ========== Language Selector - Show Short Names Only ========== */
     .language-selector .selector-btn {
         position: relative;