From ff28ca915de4a6a37df48ed283f4e1b38bcad8e8 Mon Sep 17 00:00:00 2001
From: Raunak Bhagat <r@rabh.io>
Date: Mon, 24 Aug 2026 22:15:56 +0000
Subject: [PATCH] refactor(opal): restore the LineItemButton padding prop and
 sidebar spacing (#14213)

---
 .../src/components/buttons/line-item-button/README.md  | 10 ++++++++--
 .../components/buttons/line-item-button/components.tsx |  7 ++++---
 .../src/components/buttons/sidebar-tab/components.tsx  |  2 +-
 web/lib/opal/src/components/inputs/shared.css          |  2 +-
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/web/lib/opal/src/components/buttons/line-item-button/README.md b/web/lib/opal/src/components/buttons/line-item-button/README.md
index d722778884..b7f70bdaa4 100644
--- a/web/lib/opal/src/components/buttons/line-item-button/README.md
+++ b/web/lib/opal/src/components/buttons/line-item-button/README.md
@@ -9,7 +9,7 @@ A composite component that wraps `Interactive.Stateful > Interactive.Container >
 ```
 Interactive.Stateful         <- selectVariant, state, interaction, onClick, href, ref
   └─ Interactive.Container   <- width, rounding
-       └─ ContentAction      <- withInteractive, padding={2}
+       └─ ContentAction      <- withInteractive, padding
             ├─ Content       <- icon, title, description, sizePreset, variant, ...
             └─ rightChildren
 ```
@@ -18,7 +18,12 @@ The row renders as a focusable `<div role="button">` (with Enter/Space activatio
 native `<button>`, so interactive `rightChildren` such as action buttons don't produce invalid
 button-in-button nesting. With `href` it renders an anchor instead.
 
-`padding` is hardcoded to `2` and `withInteractive` is always `true`. These are not exposed as props.
+`withInteractive` is always `true` and is not exposed. `padding` is forwarded to the inner
+`ContentAction`, on top of the row's own `p-1.5` inset.
+
+It is not an open `Spacing`: the prop is inherited from `ContentActionProps`, which narrows it to
+`0 | 0.5 | 1 | 2` — the four paddings `Interactive.Container` applies at its size presets, so that a
+row's label lines up with an adjacent button. A step outside that set is a type error.
 
 ## Props
 
@@ -41,6 +46,7 @@ button-in-button nesting. With `href` it renders an anchor instead.
 |------|------|---------|-------------|
 | `rounding` | `InteractiveContainerRoundingVariant` | `"md"` | Corner rounding preset (height is content-driven) |
 | `width` | `WidthVariant` | `"full"` | Container width |
+| `padding` | `0 \| 0.5 \| 1 \| 2` | `0.5` | Padding around the inner `ContentAction`, as a spacing step (`N / 4` rem) |
 | `tooltip` | `string` | — | Tooltip text shown on hover |
 | `tooltipSide` | `TooltipSide` | `"top"` | Tooltip side |
 
diff --git a/web/lib/opal/src/components/buttons/line-item-button/components.tsx b/web/lib/opal/src/components/buttons/line-item-button/components.tsx
index cd2bdd3974..6a406a8ed8 100644
--- a/web/lib/opal/src/components/buttons/line-item-button/components.tsx
+++ b/web/lib/opal/src/components/buttons/line-item-button/components.tsx
@@ -14,7 +14,7 @@ import { type ContentActionProps, ContentAction } from "@opal/layouts";
 
 type ContentPassthroughProps = DistributiveOmit<
   ContentActionProps,
-  "padding" | "width" | "ref"
+  "width" | "ref"
 >;
 
 type LineItemButtonOwnProps = Pick<
@@ -93,6 +93,7 @@ function LineItemButton({
   // Sizing
   rounding = "md",
   width = "full",
+  padding = 0.5,
   tooltip,
   tooltipSide = "top",
 
@@ -128,11 +129,11 @@ function LineItemButton({
         rounding={rounding}
         {...rowButtonProps}
       >
-        <div className="w-full p-2">
+        <div className="w-full p-1.5">
           <ContentAction
             color="interactive"
             {...(contentActionProps as ContentActionProps)}
-            padding={0}
+            padding={padding}
           />
         </div>
       </Interactive.Container>
diff --git a/web/lib/opal/src/components/buttons/sidebar-tab/components.tsx b/web/lib/opal/src/components/buttons/sidebar-tab/components.tsx
index 8645e18dfb..1d78b24b9a 100644
--- a/web/lib/opal/src/components/buttons/sidebar-tab/components.tsx
+++ b/web/lib/opal/src/components/buttons/sidebar-tab/components.tsx
@@ -136,7 +136,7 @@ function SidebarTab({
     icon ??
     (nested
       ? ((() => (
-          <div className="w-6" aria-hidden="true" />
+          <div className="w-4" aria-hidden="true" />
         )) as IconFunctionComponent)
       : null);
 
diff --git a/web/lib/opal/src/components/inputs/shared.css b/web/lib/opal/src/components/inputs/shared.css
index 9085e5e708..74327f545f 100644
--- a/web/lib/opal/src/components/inputs/shared.css
+++ b/web/lib/opal/src/components/inputs/shared.css
@@ -17,7 +17,7 @@
 
 .opal-input {
   /* `--interactive-duration` (150ms) felt too laggy, so we're using 100ms instead. */
-  @apply flex flex-row items-center justify-between h-fit p-[5px] rounded-08 relative w-full transition-all duration-100 ease-(--interactive-easing);
+  @apply flex flex-row items-center justify-between h-fit p-1.5 rounded-08 relative w-full transition-all duration-100 ease-(--interactive-easing);
 }
 
 .opal-input[data-variant="primary"] {