File tree Expand file tree Collapse file tree
packages/pluggableWidgets/combobox-web Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -48,12 +48,6 @@ column` and is the element floating-ui height-caps. `.widget-combobox-menu-list`
4848 ` margin: 4px 0 ` , ` width: 100% ` , ` left: unset ` from ` .widget-combobox-menu ` - these fight
4949 the inline styles floating-ui writes (the ` margin ` in particular caused a residual
5050 offset). The 4px gap is preserved via ` offset(4) ` .
51- - ** Clip the shrunk menu's inner shadow** : ` .widget-combobox-menu ` gets ` overflow: hidden `
52- and drops its top ` padding ` + the ` .widget-combobox-menu-list:last-child ` ` margin-bottom ` .
53- Once the list scrolls inside a shrunk wrapper, the old outer padding/margin left the
54- inner scroll shadow with a ~ 1px offset at the top and bottom, and without clipping the
55- shadow overflowed the rounded wrapper. ` overflow: hidden ` clips it to the border radius
56- and removing the padding/margin removes the offset.
5751- ** alwaysOpen (` keepMenuOpen ` ) unchanged in behavior** : this mode renders inline with
5852 ` position: relative ` and must NOT use floating positioning. Both selections call
5953 ` useFloatingMenu(alwaysOpen ? false : isOpen) ` and the wrapper attaches no floating ref /
Original file line number Diff line number Diff line change 4242 ` margin: 4px 0 ` , ` width: 100% ` , ` left: unset ` ; add ` display: flex; flex-direction: column `
4343- [x] 3.3 SCSS ` .widget-combobox-menu-list ` : ` max-height: 320px ` → `max-height: 100%; flex: 1;
4444min-height: 0` so the list fills + scrolls within the (shrunk) wrapper
45- - [x] 3.4 SCSS ` .widget-combobox-menu ` : add ` overflow: hidden ` , remove the top ` padding ` and the
46- ` .widget-combobox-menu-list:last-child ` ` margin-bottom ` so the inner scroll shadow is
47- clipped to the rounded wrapper and no longer has a ~ 1px top/bottom offset when shrunk
4845
4946## 4. Verification
5047
Original file line number Diff line number Diff line change @@ -29,7 +29,7 @@ $cb-skeleton-dark: #d2d2d2;
2929 display : flex ;
3030 flex-direction : column ;
3131 border-radius : var (--dropdown-border-radius , $cb-menu-border-radius );
32- overflow : hidden ;
32+ padding : var ( --dropdown-outer-padding , $cb-menu-outer-padding ) 0 0 ;
3333 z-index : 25 ;
3434 box-shadow : 0px 0px var (--dropdown-outer-padding , $cb-menu-outer-padding ) 0px
3535 var (--shadow-color-border , $cb-box-shadow-color );
@@ -44,6 +44,9 @@ $cb-skeleton-dark: #d2d2d2;
4444 min-height : 0 ;
4545 max-height : 100% ;
4646 overflow-y : auto ;
47+ & :last-child {
48+ margin-bottom : var (--dropdown-outer-padding , $cb-menu-outer-padding );
49+ }
4750 }
4851 & -lazy-scroll {
4952 background :
You can’t perform that action at this time.
0 commit comments