oster
/
hannabox
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed layout issues for mobile

This commit is contained in:
Stefan Ostermann 2025-08-17 22:45:53 +02:00
parent 8c5407691e
commit 02ee10edb9
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/style.css
View File

@ -21,6 +21,7 @@ html,body {
color: #1f2937; color: #1f2937;
-webkit-font-smoothing:antialiased; -webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale; -moz-osx-font-smoothing:grayscale;
overflow-x: hidden; /* prevent accidental horizontal scroll on mobile */
} }
a { color: var(--accent); text-decoration: none; } a { color: var(--accent); text-decoration: none; }
@ -130,8 +131,6 @@ a { color: var(--accent); text-decoration: none; }
font-weight: 700; font-weight: 700;
color: #0f172a; color: #0f172a;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
/* Buttons row - span full width of controls grid */ /* Buttons row - span full width of controls grid */
@ -330,6 +329,7 @@ a { color: var(--accent); text-decoration: none; }
box-shadow: var(--shadow); box-shadow: var(--shadow);
max-height: 420px; max-height: 420px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; /* avoid horizontal overflow from long items */
border: 1px solid rgba(15,23,42,0.04); border: 1px solid rgba(15,23,42,0.04);
position: relative; /* keep content contained */ position: relative; /* keep content contained */
z-index: 0; z-index: 0;
@ -348,6 +348,9 @@ a { color: var(--accent); text-decoration: none; }
transition: background .12s ease, transform .08s ease; transition: background .12s ease, transform .08s ease;
background: transparent; background: transparent;
z-index: 1; z-index: 1;
overflow: hidden; /* contain long text */
word-break: break-word; /* break very long words/paths */
overflow-wrap: anywhere; /* allow wrapping anywhere if needed */
} }
.playlist-container li:hover { .playlist-container li:hover {
background: linear-gradient(90deg, rgba(37,99,235,0.04), rgba(37,99,235,0.02)); background: linear-gradient(90deg, rgba(37,99,235,0.04), rgba(37,99,235,0.02));
@ -377,6 +380,8 @@ a { color: var(--accent); text-decoration: none; }
color: #0f172a; color: #0f172a;
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.35; line-height: 1.35;
word-break: break-word; /* wrap long mapping values */
overflow-wrap: anywhere;
} }
/* Align info row */ /* Align info row */
@ -476,7 +481,8 @@ a { color: var(--accent); text-decoration: none; }
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 8px; padding: 8px;
} }
.player-card { flex-direction: row; gap: 14px; padding: 14px; } /* switch to flex to avoid grid min-content overflow on small screens */
.player-card { display: flex; flex-direction: column; gap: 14px; padding: 14px; }
.artwork { width: 120px; height: 120px; } .artwork { width: 120px; height: 120px; }
.play-button { width: 72px; height: 72px; } .play-button { width: 72px; height: 72px; }
.playlist { order: 2; } .playlist { order: 2; }
@ -484,8 +490,18 @@ a { color: var(--accent); text-decoration: none; }
} }
@media (max-width: 520px) { @media (max-width: 520px) {
.topbar { padding: 10px; } .topbar { padding: 10px; flex-wrap: wrap; }
.brand h1 { font-size: 1rem; } .brand h1 { font-size: 1rem; }
.status {
min-width: 0; /* allow shrinking */
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 100%;
order: 3; /* move status below brand on very small devices */
text-align: left;
}
.artwork { width: 96px; height: 96px; } .artwork { width: 96px; height: 96px; }
.play-button { width: 64px; height: 64px; } .play-button { width: 64px; height: 64px; }
.control-row { gap: 8px; } .control-row { gap: 8px; }