Changeset d70cab7 in Klonkt

Timestamp:

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

Author:

roboburr <roboburr@…>

Branches:

main

Children:

75c6919

Parents:

1664f31

Message:

fix(agenda-beheer): form grid overflowed on mobile

.ash-grid was a fixed 2-column grid (1fr 1fr) without a media query; two non-
shrinkable date/text inputs together ~374px > phone width. Now mobile-first
single column + inputs/labels shrinkable (min-width:0), two columns only from
520px. Measured 374→360px. (admin-audio/admin-stats already had a mobile media
query.)

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

File:

• src/views/pages/admin-shows.ejs (modified) (1 diff)

src/views/pages/admin-shows.ejs

@@ -63 +63 @@
   .ash-note { font-size: 13px; opacity: .8; margin: 0 0 18px; }
   .ash-form { border: 1px solid rgba(128,128,128,.2); border-radius: 14px; padding: 16px; margin-bottom: 24px; }
-  .ash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-  .ash-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; }
+  /* Mobiel-eerst: één kolom (twee 1fr-kolommen met niet-krimpbare date/text-inputs
+     liepen samen ~374px > telefoonbreedte). Twee kolommen pas vanaf 520px. */
+  .ash-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
+  @media (min-width: 520px) { .ash-grid { grid-template-columns: 1fr 1fr; } }
+  .ash-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; min-width: 0; }
   .ash-grid .ash-wide { grid-column: 1 / -1; }
-  .ash-grid input { padding: 9px 11px; border-radius: 8px; border: 1px solid rgba(128,128,128,.4); background: transparent; color: inherit; font: inherit; font-weight: 400; }
+  .ash-grid input { min-width: 0; padding: 9px 11px; border-radius: 8px; border: 1px solid rgba(128,128,128,.4); background: transparent; color: inherit; font: inherit; font-weight: 400; }
   .ash-check { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 13.5px; }
   .ash-add { padding: 10px 18px; border-radius: 10px; border: none; background: var(--accent,#6b8f71); color: #fff; font-weight: 600; cursor: pointer; }