fix(extension): constrain height to prevent viewport overflow (#1580) (#1895)

* fix(extension): constrain height to prevent viewport overflow (#1580)

Fixes #1580

* refactor(extension): move height control to consumer components

Remove default height from base PopoverContent to avoid affecting
reusability. Consumers now explicitly set height via
`--radix-popover-content-available-height` when needed.

* feat(extension): introduce dynamic popover height handling

- add new `DynamicPopoverContent` component with adaptive height logic
- replace `PopoverContent` with `DynamicPopoverContent` in `ListsSelector`
- replace `PopoverContent` with `DynamicPopoverContent` in `TagsSelector`
- remove fixed height constraint for shorter content
- maintain backward compatibility with `dynamicHeight` prop

* feat(extension): improve dynamic popover height handling and styling

- set default max-height using CSS variable for consistent initial state
- remove redundant else branch in height calculation logic
- add overflow-y-auto to enable scrolling when content exceeds available space

* feat(extension): replace useEffect with useLayoutEffect for dynamic height

The change ensures proper measurement of the popover content height before
the browser paints, preventing layout shifts and improving rendering
performance.

* feat(extension): enhance dynamic height adjustment with debounce & resize handling

- add debounce support via custom `useDebounce` hook to optimize performance
- implement window resize handler to recalculate height on viewport changes
- improve height calculation with buffer zone and fallback mechanisms
- refactor code structure with utility functions for better maintainability
- update prop documentation and add new `debounceMs` prop
- enhance ref handling with merged refs callback
- split className into logical groups for better readability
- add proper TypeScript types and error handling for height calculations

* feat(tags-selector): move create tag option above existing tags (#1840)

- add CommandSeparator import
- restructure CommandGroup to display create option first
- remove redundant CommandGroup wrapper for create option

Resolves #1840

1 files changed, 4 insertions, 3 deletions

diff --git a/apps/browser-extension/src/components/ListsSelector.tsx b/apps/browser-extension/src/components/ListsSelector.tsx
index 8f74098f..379338b6 100644
--- a/apps/browser-extension/src/components/ListsSelector.tsx
+++ b/apps/browser-extension/src/components/ListsSelector.tsx
@@ -19,7 +19,8 @@ import {
   CommandItem,
   CommandList,
 } from "./ui/command";
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { DynamicPopoverContent } from "./ui/dynamic-popover";
+import { Popover, PopoverTrigger } from "./ui/popover";
 
 export function ListsSelector({ bookmarkId }: { bookmarkId: string }) {
   const currentlyUpdating = useSet<string>();
@@ -67,7 +68,7 @@ export function ListsSelector({ bookmarkId }: { bookmarkId: string }) {
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[320px] p-0">
+      <DynamicPopoverContent className="w-[320px] p-0">
         <Command>
           <CommandInput placeholder="Search Lists ..." />
           <CommandList>
@@ -101,7 +102,7 @@ export function ListsSelector({ bookmarkId }: { bookmarkId: string }) {
             </CommandGroup>
           </CommandList>
         </Command>
-      </PopoverContent>
+      </DynamicPopoverContent>
     </Popover>
   );
 }