From 93d88ce08d894b9a4499910853646ca614a11e5a Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Mon, 10 Nov 2025 21:09:36 +0000
Subject: [PATCH] feat: optimize mobile action bar layout with percentage-based
 widths
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PROBLEM:
- Mobile action bar using equal width distribution (1fr auto 1fr)
- Not optimal space utilization on small screens
- Action buttons and center controls taking unnecessary space

SOLUTION @ 540px breakpoint:
.action-bar-content:
- Changed grid: 1fr auto 1fr → 50% 30%
- Hamburger menu + title area: 50% width
- Language selector area: 30% width
- Reduced gap: 2rem → 0.5rem
- Reduced padding: auto → 0.5rem horizontal

Hidden elements on mobile:
- .view-controls-center: display: none (moved to hamburger menu)
- .action-buttons-right: display: none (PDF/Print in hamburger menu)

RESULT:
Mobile layout distribution:
✓ Hamburger + CV title: ~50% (more breathing room)
✓ Language selector (EN/ES): ~30% (adequate space)
✓ Remaining 20%: natural spacing/padding
✓ Center controls hidden (accessible via hamburger menu)
✓ Action buttons hidden (accessible via hamburger menu)

BENEFITS:
- Better space utilization on small screens
- Clearer visual hierarchy
- More touch-friendly target areas
- All functionality still accessible via hamburger menu
---
 static/css/main.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/static/css/main.css b/static/css/main.css
index 3275920..6d39f27 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -3347,6 +3347,18 @@ html {
    ======================================== */
 
 @media (max-width: 540px) {
+    /* Adjust action bar grid for mobile: 50% hamburger/title, 30% language */
+    .action-bar-content {
+        grid-template-columns: 50% 30%;
+        gap: 0.5rem;
+        padding: 0 0.5rem;
+    }
+
+    /* Hide center controls on mobile (moved to hamburger menu) */
+    .view-controls-center {
+        display: none;
+    }
+
     /* Hide year from title in mobile view */
     .site-title-year {
         display: none;
@@ -3373,6 +3385,11 @@ html {
         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;