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

@@ -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);

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);

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 ───────────────────────────────────────────────── */