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;