From 405d60fa27d5f94b118509703b7143db148dd347 Mon Sep 17 00:00:00 2001 From: CaffeineFueled Date: Fri, 4 Sep 2026 10:19:28 +0200 Subject: [PATCH] ui:CHANGE header in mobile view to shiw pad_id at any point --- app.py | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/app.py b/app.py index 0b84ac3..e479d1d 100644 --- a/app.py +++ b/app.py @@ -328,27 +328,18 @@ HTML = """ #auth-submit { width:100%; padding:.45rem; background:#000; color:#fff; border:none; border-radius:4px; font-size:.95rem; cursor:pointer; } - /* --- Narrow screens: keep the header on one row by shedding text, not controls. --- */ + /* --- Narrow screens: header stacks into two rows, pad name + status above, + controls below. Giving #meta a 100% flex-basis is what forces the wrap; + header's existing gap:.5rem then doubles as the row gap. Because the + controls get a full row, nothing has to be hidden or narrowed to fit. --- */ @media (max-width: 640px) { body { padding:.5rem; } - /* Hide the word but keep the dot. It is a ::before on #status itself, sized in em, - so it must be re-declared in rem to survive font-size:0. Doing it this way avoids - wrapping the label in a child element, which would break the four places where - JS assigns to $("#status").textContent. */ - #status { font-size:0; } - #status::before { width:.55rem; height:.55rem; margin-right:0; } - #lang { max-width:5.5rem; } + header { flex-wrap:wrap; } + #meta { flex:1 0 100%; } #newpad, #theme-btn { margin-left:.4rem; } #notice { padding:.4rem 1.75rem; } } - /* Below ~450px the controls (5 buttons + dropdown = 281px) leave the pad name too - little room to be legible - it degrades to "/..". Hide it rather than show a stub: - it is not interactive and the phone's URL bar already displays it. */ - @media (max-width: 450px) { - #padname { display:none; } - } - /* --- Touch devices: 16px fields, because iOS Safari force-zooms into anything smaller on focus and never zooms back out. Button sizes are unchanged. --- */ @media (pointer: coarse) {