audio streaming app
plyr.fm
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
nate nowack
and committed by
GitHub
f4934b18
894b3144
+21
-21
+15
-19
frontend/src/lib/components/Header.svelte
+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
+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 {