style: one spacing, title and skeleton language across the app

Icons inside buttons drop their manual margins in favour of the
button's built-in gap (two hundred call sites), form field stacks settle
on one spacing step, card titles on exactly two sizes, inline field
errors on one text size, and a dozen hand-rolled loading pulses move
onto the shared skeleton primitive while keeping their silhouettes. The
intake dialog wording joins the rest of the app on 'übersprungen', and
the UI guidelines now document the two deliberate footer and
touch-target systems.
This commit is contained in:
Marc-André Bombeck committed 2026-06-10 16:54:15 +02:00
1 parent 4ca3de5ff3
commit 04765ea8ac
92 files changed
+1433 -1445

No files matched your search

+2 -2
View File
@@ -18,9 +18,9 @@ import { cn } from "@/lib/utils";
* ```tsx
* <Button disabled={loading} aria-busy={loading || undefined}>
* {loading ? (
* <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
* <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
* ) : (
* <Icon className="mr-2 h-4 w-4" />
* <Icon className="h-4 w-4" />
* )}
* {label}
* </Button>
+13 -2
View File
@@ -42,7 +42,18 @@ export interface ResponsiveSheetProps {
*/
hideHeader?: boolean;
/**
* Footer slot. The Sheet branch sticky-pins the footer to the
* Footer slot. Pass the action `<Button>`s directly (a fragment is
* fine) — never a wrapper `<div className="flex …">`. The two
* branches deliberately stack differently and both rely on owning
* the flex context: the Sheet branch pins a `flex-row justify-end`
* bar so Cancel/Save sit side by side above the keyboard, while the
* Dialog branch defers to `DialogFooter`'s `flex-col-reverse
* sm:flex-row` so narrow dialogs stack the primary action on top.
* A consumer-supplied wrapper div collapses both into a single flex
* child and breaks that responsive stacking. This split is a
* decision, not drift — don't unify the two branches.
*
* The Sheet branch sticky-pins the footer to the
* bottom of the bottom-sheet so the primary CTA stays reachable
* once the body scrolls; the Dialog branch lets the footer flow
* normally beneath the body.
@@ -167,7 +178,7 @@ export function ResponsiveSheet({
{footer ? (
<SheetFooter
data-slot="responsive-sheet-footer"
className="border-border/70 sticky bottom-0 mt-0 flex-row justify-end gap-2 border-t bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/80"
className="border-border/70 bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky bottom-0 mt-0 flex-row justify-end gap-2 border-t p-4 backdrop-blur"
>
{footer}
</SheetFooter>