fix: combine stats and search into single centered margin container (#528)

- Stats and search now in one flex container, centered in left margin
- Mirrors how logout is centered in right margin
- Container has max-width to prevent overflow into content area
- Stats can wrap to 2 rows if numbers get large (flex-wrap)
- Smaller font size (0.75rem) for stats to fit better
- Breakpoint at 1599px to account for queue panel

authored by zzstoatzz.io and committed by GitHub f4934b18 894b3144

Changed files
+21 -21
frontend
src
+15 -19
frontend/src/lib/components/Header.svelte
··· 19 19 </script> 20 20 21 21 <header> 22 - <!-- Stats and search positioned on far left, splitting margin into thirds --> 23 - <div class="stats-left desktop-only"> 22 + <!-- Stats and search together in left margin, centered as a group --> 23 + <div class="margin-left desktop-only"> 24 24 <PlatformStats variant="header" /> 25 - </div> 26 - <div class="search-left desktop-only"> 27 25 <SearchTrigger /> 28 26 </div> 29 - <!-- Logout positioned on far right, mirroring stats --> 27 + <!-- Logout positioned on far right, centered in right margin --> 30 28 {#if isAuthenticated} 31 29 <div class="logout-right desktop-only"> 32 30 <button onclick={onLogout} class="btn-logout-outer" title="log out">logout</button> ··· 236 234 transform: scale(0.94); 237 235 } 238 236 239 - .stats-left { 240 - position: absolute; 241 - left: calc((100vw - var(--queue-width, 0px) - 800px) / 6); 242 - top: 50%; 243 - transform: translate(-50%, -50%); 244 - transition: left 0.3s ease; 245 - } 246 - 247 - .search-left { 237 + .margin-left { 248 238 position: absolute; 249 - left: calc((100vw - var(--queue-width, 0px) - 800px) / 3 + 20px); 239 + /* Center in the left margin: halfway between left edge and content area */ 240 + left: calc((100vw - var(--queue-width, 0px) - 800px) / 4); 250 241 top: 50%; 251 242 transform: translate(-50%, -50%); 252 243 transition: left 0.3s ease; 244 + display: flex; 245 + align-items: center; 246 + gap: 1rem; 247 + /* Constrain width to prevent overflow into content area */ 248 + max-width: calc((100vw - var(--queue-width, 0px) - 800px) / 2 - 2rem); 253 249 } 254 250 255 251 .logout-right { ··· 392 388 color: var(--bg-primary); 393 389 } 394 390 395 - /* Hide margin-positioned elements and switch to mobile layout at the same breakpoint */ 396 - @media (max-width: 1399px) { 397 - .stats-left, 398 - .search-left, 391 + /* Hide margin-positioned elements and switch to mobile layout at the same breakpoint. 392 + Account for queue panel (320px) potentially being open - need extra headroom */ 393 + @media (max-width: 1599px) { 394 + .margin-left, 399 395 .logout-right { 400 396 display: none !important; 401 397 }
+6 -2
frontend/src/lib/components/PlatformStats.svelte
··· 121 121 .stats-header { 122 122 display: flex; 123 123 align-items: center; 124 - gap: 0.75rem; 124 + gap: 0.5rem 0.75rem; 125 + flex-wrap: wrap; 126 + justify-content: center; 127 + max-width: 280px; 125 128 } 126 129 127 130 .header-stat { ··· 129 132 align-items: center; 130 133 gap: 0.3rem; 131 134 color: var(--text-secondary); 132 - font-size: 0.8rem; 135 + font-size: 0.75rem; 133 136 transition: color 0.2s; 137 + white-space: nowrap; 134 138 } 135 139 136 140 .header-stat:hover {