Changeset 49f698b in Klonkt

Timestamp:

06/21/2026 05:46:01 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

d41f4be

Parents:

fefb80c

Message:

style(switcher): mobile — Agenda on its own row at the top, rest below together

On a phone, Agenda + Solo/Circle + Timeline/Grid didn't fit on one row (462px

~370px) and broke unevenly (Agenda+Solo above, Timeline alone below).

Now the agenda pill gets its own full-width row on ≤520px → Agenda at the top,
Solo/Circle + Timeline/Grid together on the row below (~330px, fits).

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

File:

• src/views/partials/shared-styles.ejs (modified) (1 diff)

src/views/partials/shared-styles.ejs

@@ -56 +56 @@
    chrome) i.p.v. body-class-CSS → werkt betrouwbaar ook na htmx-navigatie. */
 .vs-agenda.is-active { color: var(--ink); font-weight: 600; }
+
+/* Mobiel: Agenda op een eigen rij bovenaan, en Solo/Cirkel + Tijdlijn/Grid samen
+   op de rij eronder (samen ~330px → past binnen een telefoon, i.p.v. de oude
+   onevenwichtige split Agenda+Solo / Tijdlijn). */
+@media (max-width: 520px) {
+  .view-switcher-wrap .agenda-pill { flex: 0 0 100%; justify-content: center; }
+}
 
 .grid-cols-picker {