From 13508f4654ad7c0f34b81827ccccbd071374398e Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 11 Mar 2026 11:09:47 +0100
Subject: [PATCH] fix: improve CSS layout with box-sizing reset, responsive
 alerts, and form spacing

- Add universal box-sizing: border-box reset to base styles
- Make alert component responsive with container queries (flex-wrap,
  full-width title/body at narrow widths)
- Increase form legend margin-bottom from --size-1 to --size-3
---
 src/ui/alert.css   | 9 +++++++++
 src/ui/css/gen.clj | 6 +++++-
 src/ui/form.css    | 4 ++--
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/ui/alert.css b/src/ui/alert.css
index dd9e589..39910b1 100644
--- a/src/ui/alert.css
+++ b/src/ui/alert.css
@@ -1,6 +1,8 @@
 .alert {
+  container-type: inline-size;
   position: relative;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--size-3);
   padding: var(--size-4) var(--size-6);
@@ -19,6 +21,13 @@
   margin: 0;
 }
 
+@container (max-width: 24rem) {
+  .alert-title,
+  .alert-body {
+    flex-basis: 100%;
+  }
+}
+
 .alert-success {
   border: none;
   color: var(--success);
diff --git a/src/ui/css/gen.clj b/src/ui/css/gen.clj
index 57e8ee7..b4efbf3 100644
--- a/src/ui/css/gen.clj
+++ b/src/ui/css/gen.clj
@@ -58,7 +58,11 @@
 (defn base-css
   "Generate base body/reset styles."
   []
-  "body {
+  "*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   margin: 0;
   background: var(--bg-0);
diff --git a/src/ui/form.css b/src/ui/form.css
index a34ea7e..d12ea6d 100644
--- a/src/ui/form.css
+++ b/src/ui/form.css
@@ -334,12 +334,12 @@
   font-size: var(--font-sm);
   font-weight: 500;
   color: var(--fg-0);
-  margin-bottom: var(--size-1);
+  margin-bottom: var(--size-3);
 }
 
 .form-fieldset--inline .form-legend {
   width: 100%;
-  margin-bottom: var(--size-1);
+  margin-bottom: var(--size-3);
 }
 
 /* ── Input group ───────────────────────────────────────────────── */