From 21bf088bf19ce8463f14fb69854cc41869dbab92 Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Thu, 3 Sep 2026 14:41:41 +0200
Subject: [PATCH] fix: derive status bar radius from --radius (#2616)

* fix: status bar radius css var

* refactor: radius scale

* chore: registry and agents
---
 apps/dashboard/src/app/globals.css            |  8 -------
 .../components/chart/chart-tooltip-number.tsx |  2 +-
 .../tool-renderers/list-response-logs.tsx     |  2 +-
 .../data-table/response-logs/columns.tsx      |  6 ++---
 .../response-logs/data-table-basics.tsx       |  4 ++--
 .../status-page-history/table-cell-uptime.tsx |  4 ++--
 .../src/components/development-indicator.tsx  |  2 +-
 apps/status-page/AGENTS.md                    | 11 +++++++++
 apps/status-page/src/app/globals.css          |  9 -------
 .../components/chart/chart-legend-badge.tsx   |  2 +-
 .../components/chart/chart-tooltip-number.tsx |  2 +-
 apps/web/src/content/image-zoom.tsx           |  4 ++--
 apps/web/src/content/simple-chart.tsx         |  2 +-
 packages/ui/AGENTS.md                         | 24 +++++++++++++++++++
 packages/ui/REGISTRY.md                       | 18 ++++++++++++++
 .../ui/src/components/blocks/status-bar.tsx   | 15 +++++-------
 .../src/components/blocks/status-events.tsx   |  2 +-
 packages/ui/src/components/ui/chart.tsx       |  4 ++--
 packages/ui/src/components/ui/checkbox.tsx    |  2 +-
 packages/ui/src/components/ui/input-group.tsx |  7 +++---
 packages/ui/src/components/ui/tooltip.tsx     |  2 +-
 packages/ui/src/globals.css                   | 20 +++++++++++++---
 22 files changed, 99 insertions(+), 53 deletions(-)

diff --git a/apps/dashboard/src/app/globals.css b/apps/dashboard/src/app/globals.css
index 4130e0bde..3ecbe2c96 100644
--- a/apps/dashboard/src/app/globals.css
+++ b/apps/dashboard/src/app/globals.css
@@ -52,12 +52,4 @@
   [data-status-preview] .rounded-full {
     border-radius: calc(var(--radius) * 99999999);
   }
-  [data-status-preview] .rounded-b-full {
-    border-bottom-left-radius: calc(var(--radius) * 99999999);
-    border-bottom-right-radius: calc(var(--radius) * 99999999);
-  }
-  [data-status-preview] .rounded-t-full {
-    border-top-left-radius: calc(var(--radius) * 99999999);
-    border-top-right-radius: calc(var(--radius) * 99999999);
-  }
 }
\ No newline at end of file
diff --git a/apps/dashboard/src/components/chart/chart-tooltip-number.tsx b/apps/dashboard/src/components/chart/chart-tooltip-number.tsx
index 998315d5a..0bda8c610 100644
--- a/apps/dashboard/src/components/chart/chart-tooltip-number.tsx
+++ b/apps/dashboard/src/components/chart/chart-tooltip-number.tsx
@@ -44,7 +44,7 @@ export function ChartTooltipNumberRaw({
     <>
       <div
         className={cn(
-          "h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)",
+          "h-2.5 w-2.5 shrink-0 rounded-xs bg-(--color-bg)",
           className,
         )}
         style={style}
diff --git a/apps/dashboard/src/components/chat/tool-renderers/list-response-logs.tsx b/apps/dashboard/src/components/chat/tool-renderers/list-response-logs.tsx
index bbdade044..719a4cf20 100644
--- a/apps/dashboard/src/components/chat/tool-renderers/list-response-logs.tsx
+++ b/apps/dashboard/src/components/chat/tool-renderers/list-response-logs.tsx
@@ -42,7 +42,7 @@ export function listResponseLogsTable(
         indicator: log.requestStatus ? (
           <div
             className={cn(
-              "h-2.5 w-2.5 rounded-[2px]",
+              "h-2.5 w-2.5 rounded-xs",
               statusColor[log.requestStatus],
             )}
           />
diff --git a/apps/dashboard/src/components/data-table/response-logs/columns.tsx b/apps/dashboard/src/components/data-table/response-logs/columns.tsx
index 74f22b204..3173d5711 100644
--- a/apps/dashboard/src/components/data-table/response-logs/columns.tsx
+++ b/apps/dashboard/src/components/data-table/response-logs/columns.tsx
@@ -33,13 +33,13 @@ export function getColumns(
       cell: ({ row }) => {
         const value = row.getValue("requestStatus");
         if (value === "error") {
-          return <div className="bg-destructive h-2.5 w-2.5 rounded-[2px]" />;
+          return <div className="bg-destructive h-2.5 w-2.5 rounded-xs" />;
         }
         if (value === "degraded") {
-          return <div className="bg-warning h-2.5 w-2.5 rounded-[2px]" />;
+          return <div className="bg-warning h-2.5 w-2.5 rounded-xs" />;
         }
         if (value === "success") {
-          return <div className="bg-success h-2.5 w-2.5 rounded-[2px]" />;
+          return <div className="bg-success h-2.5 w-2.5 rounded-xs" />;
         }
         return <div className="text-muted-foreground">-</div>;
       },
diff --git a/apps/dashboard/src/components/data-table/response-logs/data-table-basics.tsx b/apps/dashboard/src/components/data-table/response-logs/data-table-basics.tsx
index 6642dea21..66b498481 100644
--- a/apps/dashboard/src/components/data-table/response-logs/data-table-basics.tsx
+++ b/apps/dashboard/src/components/data-table/response-logs/data-table-basics.tsx
@@ -96,7 +96,7 @@ export function DataTableBasicsHTTP({
           <TableCell className="max-w-full overflow-x-auto font-mono whitespace-normal">
             <div className="flex items-center gap-2">
               <div
-                className={cn("bg-muted h-2.5 w-2.5 rounded-[2px]", {
+                className={cn("bg-muted h-2.5 w-2.5 rounded-xs", {
                   "bg-destructive": data?.requestStatus === "error",
                   "bg-warning": data?.requestStatus === "degraded",
                   "bg-success": data?.requestStatus === "success",
@@ -402,7 +402,7 @@ function BasicsRequestRows({ data }: { data: BasicsRequestFields }) {
       <BasicsRow label="Result">
         <div className="flex items-center gap-2">
           <div
-            className={cn("bg-muted h-2.5 w-2.5 rounded-[2px]", {
+            className={cn("bg-muted h-2.5 w-2.5 rounded-xs", {
               "bg-destructive": data?.requestStatus === "error",
               "bg-warning": data?.requestStatus === "degraded",
               "bg-success": data?.requestStatus === "success",
diff --git a/apps/dashboard/src/components/data-table/status-page-history/table-cell-uptime.tsx b/apps/dashboard/src/components/data-table/status-page-history/table-cell-uptime.tsx
index 5e2375fa5..9bf929e71 100644
--- a/apps/dashboard/src/components/data-table/status-page-history/table-cell-uptime.tsx
+++ b/apps/dashboard/src/components/data-table/status-page-history/table-cell-uptime.tsx
@@ -68,7 +68,7 @@ function EventItem({ event }: { event: HistoryEvent }) {
       <div className="flex items-center gap-2">
         <span
           className={cn(
-            "size-2.5 shrink-0 rounded-[2px]",
+            "size-2.5 shrink-0 rounded-xs",
             eventIndicatorStyles[event.type],
           )}
         />
@@ -130,7 +130,7 @@ export function TableCellUptime({
           <div className="flex items-center gap-2">
             <span
               className={cn(
-                "size-2.5 shrink-0 rounded-[2px]",
+                "size-2.5 shrink-0 rounded-xs",
                 indicatorStyles[cell.status],
               )}
             />
diff --git a/apps/dashboard/src/components/development-indicator.tsx b/apps/dashboard/src/components/development-indicator.tsx
index d76af66e3..0d41d0174 100644
--- a/apps/dashboard/src/components/development-indicator.tsx
+++ b/apps/dashboard/src/components/development-indicator.tsx
@@ -23,7 +23,7 @@ export function DevelopmentIndicator() {
           <TooltipProvider delayDuration={0}>
             <Tooltip>
               <TooltipTrigger>
-                <div className="bg-destructive text-background w-fit rounded-t px-2 py-1 font-mono text-xs">
+                <div className="bg-destructive text-background w-fit rounded-t-sm px-2 py-1 font-mono text-xs">
                   In Beta
                 </div>
               </TooltipTrigger>
diff --git a/apps/status-page/AGENTS.md b/apps/status-page/AGENTS.md
index 101768148..e072a5b86 100644
--- a/apps/status-page/AGENTS.md
+++ b/apps/status-page/AGENTS.md
@@ -32,6 +32,17 @@ the page's access type — a gated page must not inherit a public TTL.
 Themes come from `@openstatus/theme-store` as OKLCH CSS variables. Add or edit
 a theme in that package; do not hard-code colours in a component.
 
+`--radius` is themed too, and this app overrides it to `0rem`. The scale in
+`packages/ui/src/globals.css` is proportional to it (`xs` 0.2, `rounded` 0.4,
+`sm` 0.6, `md` 0.8, `lg` 1.0, `xl` 1.4), so every step collapses with the theme
+— use the tokens, never a hard-coded `rounded-[4px]`, and prefer `rounded-lg`
+over the equivalent `rounded-(--radius)`. A pill that stays a pill under a
+square theme is the bug. `rounded-full` is only for a chip that wraps a glyph
+(`StatusIcon`); a coloured status marker takes `rounded-lg`, matching the bar it
+describes. The `.rounded-full` override in `globals.css` exists only so
+Tailwind's `9999px` doesn't defeat `--radius: 0` — never add more of those, fix
+the component (see `packages/ui/AGENTS.md`).
+
 ## Impact labels
 
 Status-page impact labels are coloured text only — no dots, no chevrons. The
diff --git a/apps/status-page/src/app/globals.css b/apps/status-page/src/app/globals.css
index 685715b1e..634c72aa6 100644
--- a/apps/status-page/src/app/globals.css
+++ b/apps/status-page/src/app/globals.css
@@ -13,7 +13,6 @@
 @theme inline {
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-commit-mono, var(--font-geist-mono));
-  --radius-xs: calc(var(--radius) - 8px);
 }
 
 :root {
@@ -34,12 +33,4 @@
   .rounded-full {
     border-radius: calc(var(--radius) * 99999999);
   }
-  .rounded-b-full {
-    border-bottom-left-radius: calc(var(--radius) * 99999999);
-    border-bottom-right-radius: calc(var(--radius) * 99999999);
-  }
-  .rounded-t-full {
-    border-top-left-radius: calc(var(--radius) * 99999999);
-    border-top-right-radius: calc(var(--radius) * 99999999);
-  }
 }
diff --git a/apps/status-page/src/components/chart/chart-legend-badge.tsx b/apps/status-page/src/components/chart/chart-legend-badge.tsx
index ef0d13f3e..29209c53f 100644
--- a/apps/status-page/src/components/chart/chart-legend-badge.tsx
+++ b/apps/status-page/src/components/chart/chart-legend-badge.tsx
@@ -113,7 +113,7 @@ export function ChartLegendBadge({
               <itemConfig.icon />
             ) : (
               <div
-                className="h-2 w-2 shrink-0 rounded-(--radius-xs)"
+                className="h-2 w-2 shrink-0 rounded-xs"
                 style={{
                   backgroundColor: item.color,
                 }}
diff --git a/apps/status-page/src/components/chart/chart-tooltip-number.tsx b/apps/status-page/src/components/chart/chart-tooltip-number.tsx
index 4c2f46d8f..47d64577b 100644
--- a/apps/status-page/src/components/chart/chart-tooltip-number.tsx
+++ b/apps/status-page/src/components/chart/chart-tooltip-number.tsx
@@ -24,7 +24,7 @@ export function ChartTooltipNumber({
   return (
     <>
       <div
-        className="h-2.5 w-2.5 shrink-0 rounded-(--radius-xs) bg-(--color-bg)"
+        className="h-2.5 w-2.5 shrink-0 rounded-xs bg-(--color-bg)"
         style={
           {
             "--color-bg": `var(--color-${name})`,
diff --git a/apps/web/src/content/image-zoom.tsx b/apps/web/src/content/image-zoom.tsx
index 93dc42880..029386055 100644
--- a/apps/web/src/content/image-zoom.tsx
+++ b/apps/web/src/content/image-zoom.tsx
@@ -33,8 +33,8 @@ export const ImageZoom = ({
     className={cn(
       "relative",
       "[&_[data-rmiz-ghost]]:pointer-events-none [&_[data-rmiz-ghost]]:absolute",
-      "[&_[data-rmiz-btn-zoom]]:bg-foreground/70 [&_[data-rmiz-btn-zoom]]:text-background [&_[data-rmiz-btn-zoom]]:m-0 [&_[data-rmiz-btn-zoom]]:size-10 [&_[data-rmiz-btn-zoom]]:touch-manipulation [&_[data-rmiz-btn-zoom]]:appearance-none [&_[data-rmiz-btn-zoom]]:rounded-[50%] [&_[data-rmiz-btn-zoom]]:border-none [&_[data-rmiz-btn-zoom]]:p-2 [&_[data-rmiz-btn-zoom]]:outline-offset-2",
-      "[&_[data-rmiz-btn-unzoom]]:bg-foreground/70 [&_[data-rmiz-btn-unzoom]]:text-background [&_[data-rmiz-btn-unzoom]]:m-0 [&_[data-rmiz-btn-unzoom]]:size-10 [&_[data-rmiz-btn-unzoom]]:touch-manipulation [&_[data-rmiz-btn-unzoom]]:appearance-none [&_[data-rmiz-btn-unzoom]]:rounded-[50%] [&_[data-rmiz-btn-unzoom]]:border-none [&_[data-rmiz-btn-unzoom]]:p-2 [&_[data-rmiz-btn-unzoom]]:outline-offset-2",
+      "[&_[data-rmiz-btn-zoom]]:bg-foreground/70 [&_[data-rmiz-btn-zoom]]:text-background [&_[data-rmiz-btn-zoom]]:m-0 [&_[data-rmiz-btn-zoom]]:size-10 [&_[data-rmiz-btn-zoom]]:touch-manipulation [&_[data-rmiz-btn-zoom]]:appearance-none [&_[data-rmiz-btn-zoom]]:rounded-full [&_[data-rmiz-btn-zoom]]:border-none [&_[data-rmiz-btn-zoom]]:p-2 [&_[data-rmiz-btn-zoom]]:outline-offset-2",
+      "[&_[data-rmiz-btn-unzoom]]:bg-foreground/70 [&_[data-rmiz-btn-unzoom]]:text-background [&_[data-rmiz-btn-unzoom]]:m-0 [&_[data-rmiz-btn-unzoom]]:size-10 [&_[data-rmiz-btn-unzoom]]:touch-manipulation [&_[data-rmiz-btn-unzoom]]:appearance-none [&_[data-rmiz-btn-unzoom]]:rounded-full [&_[data-rmiz-btn-unzoom]]:border-none [&_[data-rmiz-btn-unzoom]]:p-2 [&_[data-rmiz-btn-unzoom]]:outline-offset-2",
       "[&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:pointer-events-none [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:absolute [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:size-px [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:overflow-hidden [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:whitespace-nowrap [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip-path:inset(50%)] [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip:rect(0_0_0_0)]",
       "[&_[data-rmiz-btn-zoom]]:absolute [&_[data-rmiz-btn-zoom]]:top-2.5 [&_[data-rmiz-btn-zoom]]:right-2.5 [&_[data-rmiz-btn-zoom]]:bottom-auto [&_[data-rmiz-btn-zoom]]:left-auto [&_[data-rmiz-btn-zoom]]:cursor-zoom-in",
       "[&_[data-rmiz-btn-unzoom]]:absolute [&_[data-rmiz-btn-unzoom]]:top-5 [&_[data-rmiz-btn-unzoom]]:right-5 [&_[data-rmiz-btn-unzoom]]:bottom-auto [&_[data-rmiz-btn-unzoom]]:left-auto [&_[data-rmiz-btn-unzoom]]:z-[1] [&_[data-rmiz-btn-unzoom]]:cursor-zoom-out",
diff --git a/apps/web/src/content/simple-chart.tsx b/apps/web/src/content/simple-chart.tsx
index e7869a77f..a6971f82e 100644
--- a/apps/web/src/content/simple-chart.tsx
+++ b/apps/web/src/content/simple-chart.tsx
@@ -53,7 +53,7 @@ export function SimpleChart({ data, className }: SimpleChartProps) {
               formatter={(value, name) => (
                 <>
                   <div
-                    className="h-full w-1 shrink-0 self-center rounded-[2px] bg-(--color-bg)"
+                    className="h-full w-1 shrink-0 self-center rounded-xs bg-(--color-bg)"
                     style={
                       {
                         "--color-bg": `var(--color-${name})`,
diff --git a/packages/ui/AGENTS.md b/packages/ui/AGENTS.md
index 037f0251c..f4e6bfbe2 100644
--- a/packages/ui/AGENTS.md
+++ b/packages/ui/AGENTS.md
@@ -54,6 +54,30 @@ codebases that are not this one.
 - **Defaults must render unconfigured.** Slots are optional, i18n falls back to
   English. The registry preview has no wiring.
 
+## Border radius
+
+`globals.css` defines the scale as ratios of the themed `--radius`, anchored so
+the 0.625rem default keeps shadcn's pixel values: `xs` 0.2 (2px), `rounded` 0.4
+(4px), `sm` 0.6 (6px), `md` 0.8 (8px), `lg` 1.0 (10px, the base), `xl` 1.4
+(14px). Stock shadcn subtracts fixed pixels instead (`calc(var(--radius) -
+4px)`), which collapses whole steps to 0 on the status page, where a theme can
+set `--radius` to 0.25rem or 0.
+
+Never hard-code a radius, and prefer `rounded-lg` over the equivalent
+`rounded-(--radius)`. `rounded-full` is only for a chip that wraps a glyph
+(`StatusIcon`); a coloured status marker takes `rounded-lg` so it matches the
+bar it describes.
+
+In `blocks/`, bare `rounded` is off-limits: its 0.4 ratio comes from our
+`globals.css`, and a consumer's stock Tailwind resolves it to a fixed 0.25rem.
+`lg`/`md`/`sm` are safe — shadcn defines those keys too.
+
+The ratios deliberately stay out of `registry.json` `cssVars`. `--success` and
+friends are tokens a consumer lacks; `--radius-sm` is one they already have, and
+overwriting it would reshape every button and card in their app because they
+installed a status block. Installed blocks follow the host's scale — see
+`REGISTRY.md` for the snippet consumers can opt into.
+
 ## Generated output
 
 `dist/` and `public/r/` are build artifacts of `pnpm registry:build` (which
diff --git a/packages/ui/REGISTRY.md b/packages/ui/REGISTRY.md
index 3baba879b..f31aae7e6 100644
--- a/packages/ui/REGISTRY.md
+++ b/packages/ui/REGISTRY.md
@@ -47,6 +47,24 @@ The status blocks ship with English (`en-US`) defaults and an optional context p
 
 Blocks intentionally do **not** import `next-intl`, `react-intl`, or any i18n library directly — that contract keeps them shadcn-shippable. See [`src/components/blocks/README.md`](./src/components/blocks/README.md#internationalization-i18n) for the full provider example.
 
+## Border radius (optional)
+
+The blocks use the standard `--radius-*` tokens, so they inherit whatever radius scale your app already has. No setup needed.
+
+One caveat if your `--radius` is small: shadcn's stock scale subtracts fixed pixels, so at `--radius: 0.25rem` the `sm` step is `calc(0.25rem - 4px)` — zero. Steps collapse into each other and a small marker ends up square next to a rounded bar. We use a proportional scale instead, anchored so the 0.625rem default keeps shadcn's exact pixel values. To opt in, drop this into your `globals.css`:
+
+```css
+@theme inline {
+  --radius-xs: calc(var(--radius) * 0.2);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+}
+```
+
+This is app-wide, not block-scoped — which is why the registry does not ship it for you.
+
 ## Adding Components to the Registry
 
 To add a new component to the registry, update `packages/ui/registry.json`:
diff --git a/packages/ui/src/components/blocks/status-bar.tsx b/packages/ui/src/components/blocks/status-bar.tsx
index 11ea8cf10..9aee794c8 100644
--- a/packages/ui/src/components/blocks/status-bar.tsx
+++ b/packages/ui/src/components/blocks/status-bar.tsx
@@ -514,7 +514,7 @@ const StatusBarItem = forwardRef<HTMLDivElement, StatusBarItemProps>(
         <HoverCardTrigger asChild>
           <div
             ref={ref}
-            className="group focus-visible:ring-ring/50 relative flex h-full flex-1 cursor-pointer flex-col rounded-full outline-none hover:opacity-80 focus-visible:opacity-80 focus-visible:ring-[2px] aria-pressed:opacity-80"
+            className="group focus-visible:ring-ring/50 relative flex h-full flex-1 cursor-pointer flex-col rounded-lg outline-none hover:opacity-80 focus-visible:opacity-80 focus-visible:ring-[2px] aria-pressed:opacity-80"
             onClick={() => handlers.onClick(index)}
             onFocus={() => handlers.onFocus(index)}
             onBlur={handlers.onBlur}
@@ -528,7 +528,7 @@ const StatusBarItem = forwardRef<HTMLDivElement, StatusBarItemProps>(
             aria-expanded={isActive}
             data-slot="status-bar-item"
           >
-            <div className="flex h-full w-full flex-col overflow-hidden rounded-full">
+            <div className="flex h-full w-full flex-col overflow-hidden rounded-lg">
               {/* Render bar segments */}
               {item.bar.map((segment, segmentIndex) => {
                 if (renderBar) {
@@ -537,10 +537,7 @@ const StatusBarItem = forwardRef<HTMLDivElement, StatusBarItemProps>(
                 return (
                   <div
                     key={`${item.day}-${segment.status}-${segmentIndex}`}
-                    className={cn("w-full transition-all", {
-                      "rounded-t-full": segmentIndex === 0,
-                      "rounded-b-full": segmentIndex === item.bar.length - 1,
-                    })}
+                    className="w-full transition-all"
                     style={{
                       height: `${segment.height}%`,
                       backgroundColor: statusColors[segment.status],
@@ -666,7 +663,7 @@ export function StatusBarCard({
           <Separator />
           <div className="text-muted-foreground flex cursor-pointer items-center p-2 text-xs">
             <span>{labels.clickAgainToUnpin}</span>
-            <kbd className="border-input bg-background text-muted-foreground ml-auto inline-flex h-5 max-h-5 min-w-5 items-center justify-center rounded border px-1.5 font-mono text-[10px] font-medium">
+            <kbd className="border-input bg-background text-muted-foreground ml-auto inline-flex h-5 max-h-5 min-w-5 items-center justify-center rounded-sm border px-1.5 font-mono text-[10px] font-medium">
               Esc
             </kbd>
           </div>
@@ -737,7 +734,7 @@ function StatusBarContent({
     <div className="flex items-baseline gap-4" data-slot="status-bar-content">
       <div className="flex items-center gap-2">
         <div
-          className="h-2.5 w-2.5 rounded-sm"
+          className="h-2.5 w-2.5 rounded-lg"
           style={{
             backgroundColor: statusColors[status],
           }}
@@ -835,7 +832,7 @@ export function StatusBarEvent({
       <div className="text-muted-foreground hover:text-foreground absolute inset-0">
         <div className="flex items-center gap-2">
           <div
-            className="h-2.5 w-2.5 shrink-0 rounded-sm"
+            className="h-2.5 w-2.5 shrink-0 rounded-lg"
             style={{
               backgroundColor: statusColors[status],
             }}
diff --git a/packages/ui/src/components/blocks/status-events.tsx b/packages/ui/src/components/blocks/status-events.tsx
index 089658112..11cbefae7 100644
--- a/packages/ui/src/components/blocks/status-events.tsx
+++ b/packages/ui/src/components/blocks/status-events.tsx
@@ -837,7 +837,7 @@ export function StatusEventTimelineDot({
     <div
       data-slot="status-event-timeline-dot"
       className={cn(
-        "bg-muted size-2.5 shrink-0 rounded-full",
+        "bg-muted size-2.5 shrink-0 rounded-lg",
         "group-data-[variant=resolved]:bg-success",
         "group-data-[variant=monitoring]:bg-info",
         "group-data-[variant=identified]:bg-warning",
diff --git a/packages/ui/src/components/ui/chart.tsx b/packages/ui/src/components/ui/chart.tsx
index bdf0479f4..429cecfa1 100644
--- a/packages/ui/src/components/ui/chart.tsx
+++ b/packages/ui/src/components/ui/chart.tsx
@@ -202,7 +202,7 @@ function ChartTooltipContent({
                     !hideIndicator && (
                       <div
                         className={cn(
-                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                          "shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)",
                           {
                             "h-2.5 w-2.5": indicator === "dot",
                             "w-1": indicator === "line",
@@ -290,7 +290,7 @@ function ChartLegendContent({
               <itemConfig.icon />
             ) : (
               <div
-                className="h-2 w-2 shrink-0 rounded-[2px]"
+                className="h-2 w-2 shrink-0 rounded-xs"
                 style={{
                   backgroundColor: item.color,
                 }}
diff --git a/packages/ui/src/components/ui/checkbox.tsx b/packages/ui/src/components/ui/checkbox.tsx
index fc273a172..6bce7cf50 100644
--- a/packages/ui/src/components/ui/checkbox.tsx
+++ b/packages/ui/src/components/ui/checkbox.tsx
@@ -13,7 +13,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:ring-destructive/40 size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:ring-destructive/40 size-4 shrink-0 rounded border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/packages/ui/src/components/ui/input-group.tsx b/packages/ui/src/components/ui/input-group.tsx
index 3642833a1..0022cd433 100644
--- a/packages/ui/src/components/ui/input-group.tsx
+++ b/packages/ui/src/components/ui/input-group.tsx
@@ -37,7 +37,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
@@ -84,10 +84,9 @@ const inputGroupButtonVariants = cva(
   {
     variants: {
       size: {
-        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        xs: "h-6 gap-1 rounded px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
         sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
-        "icon-xs":
-          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-xs": "size-6 rounded p-0 has-[>svg]:p-0",
         "icon-sm": "size-8 p-0 has-[>svg]:p-0",
       },
     },
diff --git a/packages/ui/src/components/ui/tooltip.tsx b/packages/ui/src/components/ui/tooltip.tsx
index 13fb106ff..060f7ce13 100644
--- a/packages/ui/src/components/ui/tooltip.tsx
+++ b/packages/ui/src/components/ui/tooltip.tsx
@@ -51,7 +51,7 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-xs" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );
diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css
index a0a7fc491..ac749f815 100644
--- a/packages/ui/src/globals.css
+++ b/packages/ui/src/globals.css
@@ -36,10 +36,15 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
+  /* Proportional, not subtractive: `--radius` is theme-controlled on the status
+   * page (0rem-0.625rem), where a fixed `- 4px` offset collapses whole steps to
+   * 0. Ratios are anchored on the 0.625rem default, so those values are
+   * unchanged (2/6/8/10/14px) and every other radius scales with the theme. */
+  --radius-xs: calc(var(--radius) * 0.2);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) * 1.4);
 
   --color-success: var(--success);
   --color-warning: var(--warning);
@@ -176,3 +181,12 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  /* Tailwind's bare `rounded` is a hard-coded 0.25rem (its `--radius` lives in
+   * `@theme default`, which our `:root --radius` cannot override). Re-point it
+   * at the scale so it collapses with the theme like every other step. */
+  .rounded {
+    border-radius: calc(var(--radius) * 0.4);
+  }
+}
-- 
2.54.0