Changeset 1664f31 in Klonkt for src/views/pages

Timestamp:

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

Author:

roboburr <roboburr@…>

Branches:

main

Children:

d70cab7

Parents:

11b3ba5

Message:

fix(uiterlijk): links rows overflowed on mobile → horizontal overflow

.profile-link-row had a fixed 160px column + a non-shrinkable URL input
(min-width:auto ~228px) without a media query → together ~447px > phone width,
causing the Appearance page to be too wide (zoomable). Now mobile-first: the
platform select gets its own full-width row, input may shrink (min-width:0); the
old 160px 1fr auto row only from 520px. Measured: row 447→360px.

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

File:

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

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

@@ -560 +560 @@
   .photo-controls { gap: .55rem; }
 }
+/* Mobiel-eerst: platform-keuze op een eigen regel (volle breedte), daaronder de
+   URL-input + verwijderknop. Voorkomt horizontale overflow op telefoons (de vaste
+   160px-kolom + niet-krimpbare input liepen samen ~447px > schermbreedte). */
 .profile-link-row {
-  display: grid; grid-template-columns: 160px 1fr auto; gap: 0.5rem; margin-bottom: 0.5rem;
-}
-.profile-link-row select { padding: 0.45rem 0.6rem; }
+  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; margin-bottom: 0.5rem;
+}
+.profile-link-row select { padding: 0.45rem 0.6rem; grid-column: 1 / -1; }
+.profile-link-row input { min-width: 0; }
+@media (min-width: 520px) {
+  .profile-link-row { grid-template-columns: 160px 1fr auto; }
+  .profile-link-row select { grid-column: auto; }
+}
 .profile-links-fieldset details > label { margin-top: 0.4rem; }
 </style>