fix(shared): improve dropdown scroll affordance and responsive sizing

[tsahimatsliah]

Summary

• Add useScrollFade and wire it into shared DropdownMenuContent for top/bottom overflow fade indicators.
• Replace fixed dropdown scroll height with viewport-aware sizing using --radix-dropdown-menu-content-available-height.
• Add dropdown variants (action and field) to separate sizing behavior.
• Improve action dropdown UX with readable default width and increased trigger gap (sideOffset).
• Keep field/select menus trigger-width based, add a field global max-height clamp for long lists, and prevent tiny-width shrinking with a field min width floor.
• Tune viewport edge safety by increasing dropdown collision padding to 24.
• Tune fade behavior: edge opacity set to 0.24 and mask logic updated so edge items remain visible.
• Compact dropdown item visuals by reducing row/icon density for a cleaner menu style.
• Align select-like components (Dropdown, Select, PollDurationDropdown, MonthSelect, YearSelect, ExperienceLevelDropdown) with shared field variant behavior.

Test plan

• Run pnpm --filter shared lint
• Verify action dropdown spacing and width in feed/post context menus
• Verify field/select dropdown width and height behavior on small and large screens
• Verify long option lists (year select) keep visible edge items with fade and proper viewport gaps

Preview domain

https://fix-shared-dropdown-scroll-and-s.preview.app.daily.dev

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
daily-webapp	Ready	Preview	Mar 7, 2026 1:15pm
storybook	Building	Preview	Mar 7, 2026 1:15pm

[tsahimatsliah]

Implemented branch summary:

• Added useScrollFade (packages/shared/src/hooks/useScrollFade.ts) and integrated it in shared DropdownMenuContent so overflowing menus show top/bottom fade affordances.
• Replaced fixed dropdown scroll height with viewport-aware sizing: max-h-[var(--radix-dropdown-menu-content-available-height)].
• Added dropdown variants for width behavior:
  • action: readable menu sizing defaults for action/context menus.
  • field: trigger-width behavior for select-like controls, with viewport clamp.
• Added global field-menu height clamp for long option lists:
  • .DropdownMenuContentField .DropdownMenuScrollable { max-height: min(var(--radix-dropdown-menu-content-available-height), 20rem); }
• Tuned action dropdown trigger gap via default sideOffset for action variant.
• Reduced dropdown row density and menu icon size for more compact Notion-like presentation.
• Refined fade rendering so edge items remain visible (edge opacity set to 0.56) and removed the false "bottom gap" perception.
• Normalized select-like components to the shared field variant behavior:
  • Dropdown, Select, PollDurationDropdown, MonthSelect, YearSelect, ExperienceLevelDropdown.

Validation completed:

• pnpm --filter shared lint passes.