Merge pull request #1115 from mfts/fix/invite-group

fix: improve document nav on mobile devices
mfts · Oct 18, 2024 · 10e2be7 · 10e2be7
2 parents e235e70 + c53e064
commit 10e2be7
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 20 deletions.
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
@@ -12,20 +12,42 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipPortal = TooltipPrimitive.Portal;
 
+const TooltipArrow = TooltipPrimitive.Arrow;
+
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    arrow?: boolean;
+    arrowClassName?: string;
+  }
+>(
+  (
+    {
       className,
-    )}
-    {...props}
-  />
-));
+      sideOffset = 4,
+      children,
+      arrow = false,
+      arrowClassName,
+      ...props
+    },
+    ref,
+  ) => (
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {arrow ? (
+        <TooltipArrow className={cn("fill-popover", arrowClassName)} />
+      ) : null}
+    </TooltipPrimitive.Content>
+  ),
+);
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export const BadgeTooltip = ({
@@ -77,6 +99,7 @@ export {
   Tooltip,
   TooltipTrigger,
   TooltipPortal,
+  TooltipArrow,
   TooltipContent,
   TooltipProvider,
 };
diff --git a/components/view/nav.tsx b/components/view/nav.tsx
@@ -192,7 +192,7 @@ export default function Nav({
               </Breadcrumb>
             ) : null}
           </div>
-          <div className="absolute inset-y-0 right-0 flex items-center space-x-4 pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+          <div className="absolute inset-y-0 right-0 flex items-center space-x-2 pr-2 sm:static sm:inset-auto sm:ml-6 sm:space-x-4 sm:pr-0">
             {embeddedLinks && embeddedLinks.length > 0 ? (
               <DropdownMenu>
                 <DropdownMenuTrigger>
@@ -241,15 +241,15 @@ export default function Nav({
             {allowDownload ? (
               <Button
                 onClick={downloadFile}
-                className="m-1 bg-gray-900 text-white hover:bg-gray-900/80"
+                className="size-8 bg-gray-900 text-white hover:bg-gray-900/80 sm:size-10"
                 size="icon"
                 title="Download document"
               >
-                <Download className="h-5 w-5" />
+                <Download className="size-4 sm:size-5" />
               </Button>
             ) : null}
 
-            {!(isVertical && isMobile) && documentRefs ? (
+            {!isMobile && documentRefs ? (
               <div className="flex gap-1">
                 <Button
                   onClick={() => {
@@ -296,16 +296,16 @@ export default function Nav({
               </div>
             ) : null}
             {pageNumber && numPages ? (
-              <div className="flex h-10 items-center rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white">
+              <div className="flex h-8 items-center space-x-1 rounded-md bg-gray-900 px-3 py-1.5 text-xs font-medium text-white sm:h-10 sm:px-4 sm:py-2 sm:text-sm">
                 <span style={{ fontVariantNumeric: "tabular-nums" }}>
                   {pageNumber}
                 </span>
+                <span className="text-gray-400">/</span>
                 <span
                   className="text-gray-400"
                   style={{ fontVariantNumeric: "tabular-nums" }}
                 >
-                  {" "}
-                  / {numPages}
+                  {numPages}
                 </span>
               </div>
             ) : null}

diff --git a/components/view/report-form.tsx b/components/view/report-form.tsx
@@ -83,11 +83,11 @@ export default function ReportForm({
         >
           <PopoverTrigger asChild>
             <Button
-              className="m-1 bg-gray-900 text-gray-300 hover:bg-gray-900/80 hover:text-gray-50"
+              className="h-8 w-8 bg-gray-900 text-xs text-gray-300 hover:bg-gray-900/80 hover:text-gray-50 sm:h-10 sm:w-10 sm:text-sm"
               size="icon"
               title="Report abuse"
             >
-              <Flag className="h-4 w-4" />
+              <Flag className="size-3 sm:size-4" />
             </Button>
           </PopoverTrigger>
         </ButtonTooltip>