itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-22 06:25:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: usable layout when the window is small (#981)

Browse Source 
* fix(layout): collapse browse toolbar to icons on compact width

On a narrow window the labelled filter buttons wrapped into several rows
and, being a fixed-height sticky header, starved the album grid below them
down to a clipped strip. Wrap each toolbar label in a hideable span and drop
to icon-only in compact (mobile) mode; icons keep their tooltip and
aria-label so the action stays discoverable.

* fix(window): raise minimum window size to 520x640

The old 360x480 floor let the window shrink far past the point the layout
holds together. Floor it at a laptop-friendly size where the compact layout
(icon toolbar + scrollable lists) still works.

* fix(player): scale mobile cover to fit short windows

The cover width was viewport-derived with no height bound, so on a short
window the square grew past its slot and overlapped the title. Bind it to
the shrinkable wrap via max-height and keep it square with auto sizing.

* docs: changelog for small-window layout fixes (#981)
This commit is contained in:
Frank Stellmacher
2026-06-04 11:16:48 +02:00
committed by GitHub
parent f3eb58c707
commit b0f35eabc9
10 changed files with 45 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/layout/cover-art.css
+9 -2
View File
@@ -8,8 +8,15 @@
}
.mp-cover {
width: min(calc(100vw - 28px), 55vh);
max-width: 440px;
/* Largest square that fits BOTH the viewport width and the height the flex
column leaves for the cover. `max-height: 100%` ties the image to its
(shrinkable) wrap, so on a short window it scales down instead of growing
past its slot and overlapping the title (zunoz, RC2 small-window report).
`width/height: auto` + `aspect-ratio` keep it square while it shrinks. */
max-width: min(calc(100vw - 28px), 440px);
max-height: 100%;
width: auto;
height: auto;
aspect-ratio: 1;
object-fit: cover;
border-radius: 14px;
src/styles/layout/main-content.css
+9
View File
@@ -180,6 +180,15 @@
min-height: 0;
}
/* Compact mode: the sticky toolbar is `flex-shrink: 0`, so labelled filter
buttons wrap into several rows on a narrow window and starve the `flex: 1`
list below them, clipping the album grid (zunoz, RC2). Collapse the toolbar
buttons to icon-only (label hidden, icon + tooltip + aria-label kept) so the
row stays short and the list keeps its height. */
.app-shell[data-mobile] .mainstage-inpage-toolbar .toolbar-btn-label {
display: none;
}
.mainstage-inpage-scroll__viewport {
padding-bottom: var(--space-6);
padding-right: var(--space-6);