From e479e5b2a83a0f207acef506eb66840009fbf9dd Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Sat, 1 Aug 2026 18:29:56 +0200
Subject: [PATCH] Refine TopBar mobile layout with improved spacing and text
 truncation

Adjusted TopBar mobile styling to prevent wrapping and optimize space usage on narrow screens. Updated flex properties to prevent button stretching, reduced padding and gaps for tighter layout, and added text truncation for game title with 105px max-width. Decreased minimum button height from 44px to 40px and refined font sizes for better fit on small devices.
---
 frontend/src/styles/hooks/useHpGlobalStyles.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/styles/hooks/useHpGlobalStyles.js b/frontend/src/styles/hooks/useHpGlobalStyles.js
index 11ce07a..b875451 100644
--- a/frontend/src/styles/hooks/useHpGlobalStyles.js
+++ b/frontend/src/styles/hooks/useHpGlobalStyles.js
@@ -98,11 +98,12 @@ export function useHpGlobalStyles() {
       .hp-admin-status--disabled { color: #ffb3b3 !important; }
       @media (max-width: 600px) {
         .hp-shell { padding: calc(12px + env(safe-area-inset-top)) 10px calc(28px + env(safe-area-inset-bottom)) !important; }
-        .hp-topbar { align-items: flex-start !important; padding: 12px !important; flex-wrap: wrap !important; }
-        .hp-topbar-actions { width: 100%; margin-left: 0; justify-content: stretch; }
-        .hp-user-menu-wrap { flex: 1; min-width: 0; }
-        .hp-topbar-user, .hp-topbar-new { flex: 1; min-height: 44px; }
-        .hp-topbar-user { width: 100%; }
+        .hp-topbar { align-items: center !important; padding: 10px !important; gap: 6px !important; flex-wrap: nowrap !important; }
+        .hp-topbar > div:first-child { min-width: 0; flex: 1; }
+        .hp-topbar > div:first-child > div:last-child { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px !important; }
+        .hp-topbar-actions { width: auto; flex: 0 0 auto; margin-left: 0; gap: 5px !important; }
+        .hp-user-menu-wrap { flex: 0 0 auto; min-width: 0; }
+        .hp-topbar-user, .hp-topbar-new { flex: 0 0 auto; min-height: 40px; width: auto; padding: 8px 9px !important; font-size: 13px; }
         .hp-topbar-user { justify-content: center; }
         .hp-user-dropdown { left: 0 !important; right: auto !important; width: max-content; max-width: calc(100vw - 20px); min-width: min(220px, calc(100vw - 20px)) !important; }
         .hp-user-dropdown > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -120,7 +121,8 @@ export function useHpGlobalStyles() {
       }
       @media (max-width: 360px) {
         .hp-row { grid-template-columns: minmax(0, 1fr) 38px 56px !important; font-size: 14px; }
-        .hp-topbar { gap: 8px !important; }
+        .hp-topbar { gap: 5px !important; }
+        .hp-topbar-user, .hp-topbar-new { padding-left: 7px !important; padding-right: 7px !important; font-size: 12px; }
       }
     `;
     document.head.appendChild(style);