From a230c37281d31de57b3615720ee510b420957ea3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=B6=BE=E7=80=AC=E6=A1=83=E6=A1=83?= Date: Thu, 10 Sep 2026 09:29:23 +0800 Subject: [PATCH] web: stack file-row status below the name on narrow screens On phone-width viewports the right-aligned status column shared a flex line with a long file name and wrapped one word per line. Below 560px the row now wraps: name and action icons keep the first line and the status takes a full-width line underneath. --- web/style.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/web/style.css b/web/style.css index 8a2da81..47cfab0 100644 --- a/web/style.css +++ b/web/style.css @@ -333,6 +333,26 @@ footer { } footer a { color: var(--dim); } +/* --- narrow screens --- */ + +/* On a narrow viewport the status column (flex: 1, right-aligned) is + squeezed by a long file name into a one-word-per-line vertical strip. + Stack the row instead: name + icons on the first line, the status on its + own full-width line below, left-aligned. */ +@media (max-width: 560px) { + main { padding: 1.5rem 0.9rem 2.5rem; } + + #dropzone { padding: 1.75rem 1rem; } + + .file .row { flex-wrap: wrap; } + .file .name { flex: 1; min-width: 0; } + .file .status { + order: 6; /* after the download/remove icons */ + flex-basis: 100%; + text-align: left; + } +} + /* --- animations --- */ @keyframes fadeIn {