Files
twenty/packages/twenty-ui-deprecated
Félix Malfait 8a3e6e645a fix(ui): restore content-box sizing for components broken by the global border-box reset (#21349)
## Problem

Since the `twenty-ui` → `twenty-ui-deprecated` / `twenty-new-ui` →
`twenty-ui` rename (#21315), many deprecated components render with
**compacted height** — e.g. dropdown menu items collapse from 32px to
16px, and chips from ~24px to 16px.

## Root cause

The new `twenty-ui` (formerly `twenty-new-ui`) ships a global reset in
`packages/twenty-ui/src/styles/base/reset.scss`:

```css
*, *::before, *::after {
  box-sizing: border-box;
}
```

This is bundled into `twenty-ui/style.css`, which the app imports in
`index.tsx`. #21315 did not change the `import 'twenty-ui/style.css'`
line, but it changed what `twenty-ui` resolves to (old → new), so this
**global `border-box` reset now applies app-wide**.

Several deprecated components were authored against the **content box**,
e.g. `StyledMenuItemBase`:

```css
height: calc(32px - 2 * var(--vertical-padding));
padding: var(--vertical-padding) var(--horizontal-padding);
```

With `content-box` the padding sits *outside* the declared height → 32px
total. Under the new `border-box` reset the padding is folded *inside* →
16px total. (`Chip` uses `height: spacing[4]` + outside padding — same
failure mode.)

Verified in the running app: the collapsed menu item computes
`box-sizing: border-box`, matched by the rule `*, ::before, ::after {
box-sizing: border-box }`; `height` resolves to `calc(32px - 2 * 8px) =
16px`.

## Fix

Add `box-sizing: content-box` to the affected deprecated components. A
class selector outranks the universal `*` reset, so this restores their
intended sizing **without touching the global reset** (which the new
`twenty-ui` components rely on).

Affected: `StyledMenuItemBase` (and its hoverable variant),
`MenuItemSelect`, `MenuItemSuggestion`, `Chip`.
2026-06-09 08:52:32 +02:00
..

Twenty UI

This library was generated with Nx.

Building

Run npx nx build twenty-ui to build the library.

Storybook Server

Run npx nx start twenty-ui to start the storybook development server on localhost:6006.

Running unit tests

Run npx nx test twenty-ui to execute the unit tests via Jest.