UI: Improve Popovers

fuma-nama · Sep 15, 2024 · adc28a5 · adc28a5
1 parent 34cf456
commit adc28a5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/packages/ui/src/components/type-table.tsx b/packages/ui/src/components/type-table.tsx
@@ -20,7 +20,9 @@ export function Info({
       <PopoverTrigger>
         <InfoIcon className="size-4" />
       </PopoverTrigger>
-      <PopoverContent className="prose text-sm">{children}</PopoverContent>
+      <PopoverContent className="prose max-w-[500px] text-sm">
+        {children}
+      </PopoverContent>
     </Popover>
   );
 }

diff --git a/packages/ui/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx
@@ -17,7 +17,7 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       side="bottom"
       className={cn(
-        'z-50 min-w-[220px] max-w-[98vw] rounded-lg border bg-fd-popover p-2 text-sm text-fd-popover-foreground shadow-md data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in',
+        'z-50 min-w-[220px] max-w-[98vw] rounded-lg border bg-fd-popover p-2 text-sm text-fd-popover-foreground shadow-md focus-visible:outline-none data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in',
         className,
       )}
       {...props}

diff --git a/packages/ui/src/layouts/docs.tsx b/packages/ui/src/layouts/docs.tsx
@@ -105,7 +105,12 @@ export function DocsLayout({
         {links
           .filter((v) => v.type === 'icon')
           .map((v, i) => (
-            <LinkItem key={i} item={v} on="nav" className="md:hidden" />
+            <LinkItem
+              key={i}
+              item={v}
+              on="nav"
+              className="text-fd-muted-foreground md:hidden"
+            />
           ))}
       </Fragment>,
     );