fix(Combobox): let the menu drop shadow render in prod (MET-3088) by Zayooo00 · Pull Request #65 · fullstackhouse/plasmic-utils

Zayooo00 · 2026-09-01T07:37:34Z

Follow-up to #62–#64. On the deployed app the Combobox menu rendered with no drop shadow even though one is set via optionsClassName (0 4px 48px #00000080). Two things clipped it:

1. .optionsclip-path: inset(0 -48px -48px -48px) — a leftover from when the menu was an absolutely-positioned sibling right below the input, to stop its shadow bleeding up over the input. It cut the shadow off flush at the top and to nothing on the other sides. Moved into the canvas-only branch (inline clipPath), where the menu is still inline + flush under the input and the clip is still wanted. In prod (portalled + gapped) it's gone.

2. overflow: auto on .positioner — Headless UI's Floating UI size middleware stamps overflow: auto + max-width/max-height inline on the portal root every reposition. That scroll box clips the inner .options shadow. Overridden back to overflow: visible !important; the inner .options keeps its own max-height: 494px + overflow-y: auto so long lists still scroll.

Canvas behaviour unchanged.

next lint, tsc, vitest (49) green.

notion-workspace · 2026-09-01T07:37:38Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

…llstackhouse#65) (#7) Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

Zayooo00 · 2026-09-01T07:37:34Z

Follow-up to #62–#64. On the deployed app the Combobox menu rendered with no drop shadow even though one is set via optionsClassName (0 4px 48px #00000080). Two things clipped it:

1. .optionsclip-path: inset(0 -48px -48px -48px) — a leftover from when the menu was an absolutely-positioned sibling right below the input, to stop its shadow bleeding up over the input. It cut the shadow off flush at the top and to nothing on the other sides. Moved into the canvas-only branch (inline clipPath), where the menu is still inline + flush under the input and the clip is still wanted. In prod (portalled + gapped) it's gone.

2. overflow: auto on .positioner — Headless UI's Floating UI size middleware stamps overflow: auto + max-width/max-height inline on the portal root every reposition. That scroll box clips the inner .options shadow. Overridden back to overflow: visible !important; the inner .options keeps its own max-height: 494px + overflow-y: auto so long lists still scroll.

Canvas behaviour unchanged.

next lint, tsc, vitest (49) green.

notion-workspace · 2026-09-01T07:37:38Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

…llstackhouse#65) (#7) Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

Zayooo00 · 2026-09-01T07:37:34Z

Follow-up to #62–#64. On the deployed app the Combobox menu rendered with no drop shadow even though one is set via optionsClassName (0 4px 48px #00000080). Two things clipped it:

1. .optionsclip-path: inset(0 -48px -48px -48px) — a leftover from when the menu was an absolutely-positioned sibling right below the input, to stop its shadow bleeding up over the input. It cut the shadow off flush at the top and to nothing on the other sides. Moved into the canvas-only branch (inline clipPath), where the menu is still inline + flush under the input and the clip is still wanted. In prod (portalled + gapped) it's gone.

2. overflow: auto on .positioner — Headless UI's Floating UI size middleware stamps overflow: auto + max-width/max-height inline on the portal root every reposition. That scroll box clips the inner .options shadow. Overridden back to overflow: visible !important; the inner .options keeps its own max-height: 494px + overflow-y: auto so long lists still scroll.

Canvas behaviour unchanged.

next lint, tsc, vitest (49) green.

notion-workspace · 2026-09-01T07:37:38Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

…llstackhouse#65) (#7) Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

Zayooo00 · 2026-09-01T07:37:34Z

Follow-up to #62–#64. On the deployed app the Combobox menu rendered with no drop shadow even though one is set via optionsClassName (0 4px 48px #00000080). Two things clipped it:

1. .optionsclip-path: inset(0 -48px -48px -48px) — a leftover from when the menu was an absolutely-positioned sibling right below the input, to stop its shadow bleeding up over the input. It cut the shadow off flush at the top and to nothing on the other sides. Moved into the canvas-only branch (inline clipPath), where the menu is still inline + flush under the input and the clip is still wanted. In prod (portalled + gapped) it's gone.

2. overflow: auto on .positioner — Headless UI's Floating UI size middleware stamps overflow: auto + max-width/max-height inline on the portal root every reposition. That scroll box clips the inner .options shadow. Overridden back to overflow: visible !important; the inner .options keeps its own max-height: 494px + overflow-y: auto so long lists still scroll.

Canvas behaviour unchanged.

next lint, tsc, vitest (49) green.

notion-workspace · 2026-09-01T07:37:38Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

…llstackhouse#65) (#7) Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

Zayooo00 · 2026-09-01T07:37:34Z

Follow-up to #62–#64. On the deployed app the Combobox menu rendered with no drop shadow even though one is set via optionsClassName (0 4px 48px #00000080). Two things clipped it:

1. .optionsclip-path: inset(0 -48px -48px -48px) — a leftover from when the menu was an absolutely-positioned sibling right below the input, to stop its shadow bleeding up over the input. It cut the shadow off flush at the top and to nothing on the other sides. Moved into the canvas-only branch (inline clipPath), where the menu is still inline + flush under the input and the clip is still wanted. In prod (portalled + gapped) it's gone.

2. overflow: auto on .positioner — Headless UI's Floating UI size middleware stamps overflow: auto + max-width/max-height inline on the portal root every reposition. That scroll box clips the inner .options shadow. Overridden back to overflow: visible !important; the inner .options keeps its own max-height: 494px + overflow-y: auto so long lists still scroll.

Canvas behaviour unchanged.

next lint, tsc, vitest (49) green.

notion-workspace · 2026-09-01T07:37:38Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

…llstackhouse#65) (#7) Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

Zayooo00 · 2026-09-01T07:37:34Z

Follow-up to #62–#64. On the deployed app the Combobox menu rendered with no drop shadow even though one is set via optionsClassName (0 4px 48px #00000080). Two things clipped it:

1. .optionsclip-path: inset(0 -48px -48px -48px) — a leftover from when the menu was an absolutely-positioned sibling right below the input, to stop its shadow bleeding up over the input. It cut the shadow off flush at the top and to nothing on the other sides. Moved into the canvas-only branch (inline clipPath), where the menu is still inline + flush under the input and the clip is still wanted. In prod (portalled + gapped) it's gone.

2. overflow: auto on .positioner — Headless UI's Floating UI size middleware stamps overflow: auto + max-width/max-height inline on the portal root every reposition. That scroll box clips the inner .options shadow. Overridden back to overflow: visible !important; the inner .options keeps its own max-height: 494px + overflow-y: auto so long lists still scroll.

Canvas behaviour unchanged.

next lint, tsc, vitest (49) green.

notion-workspace · 2026-09-01T07:37:38Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

…llstackhouse#65) (#7) Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

Zayooo00 · 2026-09-01T07:37:34Z

Follow-up to #62–#64. On the deployed app the Combobox menu rendered with no drop shadow even though one is set via optionsClassName (0 4px 48px #00000080). Two things clipped it:

1. .optionsclip-path: inset(0 -48px -48px -48px) — a leftover from when the menu was an absolutely-positioned sibling right below the input, to stop its shadow bleeding up over the input. It cut the shadow off flush at the top and to nothing on the other sides. Moved into the canvas-only branch (inline clipPath), where the menu is still inline + flush under the input and the clip is still wanted. In prod (portalled + gapped) it's gone.

2. overflow: auto on .positioner — Headless UI's Floating UI size middleware stamps overflow: auto + max-width/max-height inline on the portal root every reposition. That scroll box clips the inner .options shadow. Overridden back to overflow: visible !important; the inner .options keeps its own max-height: 494px + overflow-y: auto so long lists still scroll.

Canvas behaviour unchanged.

next lint, tsc, vitest (49) green.

notion-workspace · 2026-09-01T07:37:38Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

…llstackhouse#65) (#7) Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

Zayooo00 · 2026-09-01T07:37:34Z

Follow-up to #62–#64. On the deployed app the Combobox menu rendered with no drop shadow even though one is set via optionsClassName (0 4px 48px #00000080). Two things clipped it:

1. .optionsclip-path: inset(0 -48px -48px -48px) — a leftover from when the menu was an absolutely-positioned sibling right below the input, to stop its shadow bleeding up over the input. It cut the shadow off flush at the top and to nothing on the other sides. Moved into the canvas-only branch (inline clipPath), where the menu is still inline + flush under the input and the clip is still wanted. In prod (portalled + gapped) it's gone.

2. overflow: auto on .positioner — Headless UI's Floating UI size middleware stamps overflow: auto + max-width/max-height inline on the portal root every reposition. That scroll box clips the inner .options shadow. Overridden back to overflow: visible !important; the inner .options keeps its own max-height: 494px + overflow-y: auto so long lists still scroll.

Canvas behaviour unchanged.

next lint, tsc, vitest (49) green.

notion-workspace · 2026-09-01T07:37:38Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

…llstackhouse#65) (#7) Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.

Zayooo00 force-pushed the fix/combobox-menu-shadow-clip branch from b9f4812 to f9bfe4eCompare September 1, 2026 07:42

Zayooo00 changed the title ~~fix(Combobox): drop menu clip-path so the drop shadow renders (MET-3088)~~fix(Combobox): drop menu clip-path in prod so the drop shadow renders (MET-3088)Sep 1, 2026

Zayooo00 force-pushed the fix/combobox-menu-shadow-clip branch from f9bfe4e to d76ba70Compare September 1, 2026 07:44

Zayooo00 changed the title ~~fix(Combobox): drop menu clip-path in prod so the drop shadow renders (MET-3088)~~fix(Combobox): let the menu drop shadow render in prod (MET-3088)Sep 1, 2026

dosmiko7 approved these changes Sep 1, 2026
View reviewed changes

Zayooo00 merged commit 8be486b into mainSep 1, 2026
2 checks passed

Zayooo00 deleted the fix/combobox-menu-shadow-clip branch September 1, 2026 07:50