From 984c9e5e4f0e2db9845795741628177ed17b08cf Mon Sep 17 00:00:00 2001
From: Alvaro <pursuance@gmail.com>
Date: Mon, 11 Nov 2024 16:03:46 +0100
Subject: [PATCH] Fix mobile popover

---
 src/components/info-popover/index.tsx | 2 +-
 src/components/ui/popover.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/info-popover/index.tsx b/src/components/info-popover/index.tsx
index 3face1f..940a70f 100644
--- 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
index 5af8a2c..2d58c8f 100644
--- 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",