fix: #266 set search result as absolute

dataforgoodfr · Dec 12, 2024 · 1676baf · 1676baf
1 parent 4fd4016
commit 1676baf
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/frontend/components/core/command/vessel-finder.tsx b/frontend/components/core/command/vessel-finder.tsx
@@ -111,7 +111,7 @@ export function VesselFinderDemo({ wideMode, setWideMode }: Props) {
 
   return (
     <Command
-      className={`border-[0.5px] border-solid ${!wideMode ? "cursor-pointer hover:border-primary hover:text-primary" : "cursor-default"}`}
+      className={`relative overflow-visible border-[0.5px] border-solid ${!wideMode ? "cursor-pointer hover:border-primary hover:text-primary" : "cursor-default"}`}
       onClick={() => {
         if (!wideMode) {
           setWideMode(true)
@@ -129,6 +129,7 @@ export function VesselFinderDemo({ wideMode, setWideMode }: Props) {
         placeholder="Type MMSI, IMO or vessel name to search..."
       />
       <CommandList
+        className="absolute left-0 top-[calc(100%+1px)] z-[100] w-full rounded-b-md border-[0.5px] border-solid bg-background shadow-md"
         hidden={!open}
         onMouseDown={(e) => {
           e.preventDefault()

diff --git a/frontend/components/ui/command.tsx b/frontend/components/ui/command.tsx
@@ -37,7 +37,7 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+  <div className="flex items-center px-3" cmdk-input-wrapper="">
     <Search className="mr-2 size-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}