fix: improve mobile layout and prevent text overflow on small screens
All checks were successful
Build and Push Docker Image / build (push) Successful in 32s
All checks were successful
Build and Push Docker Image / build (push) Successful in 32s
- download title: replace nowrap+ellipsis with break-word wrapping - download header: flex-wrap so badges don't push off-screen - path-item: word-break:break-all instead of nowrap overflow - missing-text: allow wrapping instead of nowrap - header-controls/user-info/admin-controls: full-width on mobile - downloads-container: tighter padding on mobile - status table: smaller padding + word-break on cache key codes - timing row: narrower label/value columns on mobile - import issue tooltip: constrained to viewport width, right-aligned - ≤400px breakpoint: hide cover art, reduce app padding further
This commit is contained in:
@@ -378,8 +378,9 @@ body {
|
||||
|
||||
.download-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@@ -438,9 +439,9 @@ body {
|
||||
margin-bottom: 2px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.download-series,
|
||||
@@ -523,7 +524,8 @@ body {
|
||||
color: var(--danger);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* ===== Footer ===== */
|
||||
@@ -671,9 +673,9 @@ body {
|
||||
font-size: 0.7rem;
|
||||
font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.path-label {
|
||||
@@ -729,6 +731,7 @@ body {
|
||||
background: var(--accent-light);
|
||||
color: var(--accent);
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ===== Status Button ===== */
|
||||
@@ -939,17 +942,39 @@ body {
|
||||
|
||||
/* ===== Mobile ===== */
|
||||
@media (max-width: 768px) {
|
||||
.app {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 12px 14px;
|
||||
padding: 10px 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.admin-controls {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.downloads-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.download-card {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
@@ -970,4 +995,60 @@ body {
|
||||
.status-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.status-table {
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.status-table th,
|
||||
.status-table td {
|
||||
padding: 4px 4px;
|
||||
}
|
||||
|
||||
.status-table td code {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.timing-label {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.timing-value {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.import-issue-badge:hover::after {
|
||||
left: auto;
|
||||
right: 0;
|
||||
max-width: calc(100vw - 24px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Very small screens (≤ 400px) ===== */
|
||||
@media (max-width: 400px) {
|
||||
.app {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.download-cover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-switcher {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
font-size: 0.78rem;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.download-card {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.timing-label {
|
||||
width: 75px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user