Fix mobile popover

Vizzuality · Nov 11, 2024 · 984c9e5 · 984c9e5
1 parent 203eb7f
commit 984c9e5
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/components/info-popover/index.tsx b/src/components/info-popover/index.tsx
@@ -22,7 +22,7 @@ const InfoPopover: React.FC<InfoPopoverProps> = ({ children, content, variant =
         {children}
         <InfoComponent className="absolute -right-2 -top-2.5 h-4 w-4 transform group-hover:rotate-45 transition-transform" />
       </PopoverTrigger>
-      <PopoverContent className="text-xs" side="top" sideOffset={isMobile ? 20 : 0} align="end"
+      <PopoverContent className="text-xs" side="top" sideOffset={isMobile ? 20 : 0} align="start"
         variant={variant}
       >{content}</PopoverContent>
     </Popover>

diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-[370px] ml-[calc(var(--radix-popover-trigger-width)_-_6px)] p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-[80vw] max-w-[370px] xl:w-[370px] ml-[calc(var(--radix-popover-trigger-width)_-_6px)] p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         {
           "bg-green-950 text-white": variant === "dark",
           "bg-popover text-popover-foreground": variant === "light",