refactor(opal): restore the LineItemButton padding prop and sidebar spacing (#14213)

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 |
 

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>

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

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"] {