Changeset 75c6919 in Klonkt

Timestamp:

06/21/2026 04:10:40 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

48ebfa7

Parents:

d70cab7

Message:

fix(mobiel): <fieldset> in admin forms doesn't shrink → entire form too wide

Root cause deeper than the links row: a <fieldset> has UA default
min-inline-size:min-content and therefore won't shrink below its content → on
Appearance (admin-site-edit) the entire form (Identity/Behaviour) overflowed off
screen on mobile. Fix: min-width:0 on .site-form + fieldsets + form fields, and
max-width:100%/border-box on inputs. Also admin-seo (same .site-form/fieldsets)
proactively fixed. Measured: Identity fieldset 424→≤360px.

Co-Authored-By: Claude <noreply@…>

Location:

src/views/pages

Files:

• admin-seo.ejs (modified) (1 diff)
• admin-site-edit.ejs (modified) (1 diff)

src/views/pages/admin-seo.ejs

@@ -109 +109 @@
 .admin-site-edit-page .admin-tagline { color: var(--ink-muted); margin: 0 0 1.75rem; }
 
-.site-form { display: flex; flex-direction: column; gap: 1.5rem; }
+.site-form { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
+/* <fieldset> krimpt door de UA min-inline-size:min-content niet mee → mobiel-overflow.
+   min-width:0 dwingt meekrimpen. */
+.site-form fieldset { min-width: 0; }
+.site-form input, .site-form textarea, .site-form select { min-width: 0; }
 .site-form fieldset {
   border: 1px solid var(--rule);

src/views/pages/admin-site-edit.ejs

@@ -357 +357 @@
 .admin-site-edit-page h1 { font-family: var(--font-display, serif); font-size: 1.8rem; margin: 0 0 1.5rem; }
 
-.site-form { display: flex; flex-direction: column; gap: 1.5rem; }
+.site-form { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
+/* Mobiel: een <fieldset> heeft een browser-default min-inline-size:min-content en
+   krimpt daardoor NIET mee → het hele formulier werd breder dan het scherm. min-width:0
+   forceert meekrimpen; de form-velden krijgen max-width:100% + border-box zodat ze
+   nooit buiten hun fieldset lopen. */
+.site-form fieldset { min-width: 0; }
+.site-form input, .site-form select, .site-form textarea { min-width: 0; max-width: 100%; box-sizing: border-box; }
 .site-form fieldset {
   border: 1px solid var(--rule);