Added width and height base zooming insted of scaleing doc

components/sidebar/app-sidebar.tsx

@@ -178,8 +178,11 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           ) : null}
         </p>
         {isLoading ? (
-          <div className="flex items-center gap-2 text-sm">
-            <Loader className="h-5 w-5 animate-spin" /> Loading teams...
+          <div className="flex items-center justify-center gap-2 text-sm">
+            <Loader className="h-5 w-5 animate-spin" />
+            <span className="group-data-[collapsible=icon]:hidden">
+              Loading teams...
+            </span>
           </div>
         ) : (
           <TeamSwitcher

components/view/powered-by.tsx

@@ -2,20 +2,18 @@ import { createPortal } from "react-dom";
 
 export const PoweredBy = ({ linkId }: { linkId: string }) => {
   return createPortal(
-    <div className="absolute bottom-0 right-0 z-[100] w-fit">
-      <div className="p-6">
-        <div className="pointer-events-auto relative z-20 flex min-h-8 w-auto items-center justify-end whitespace-nowrap rounded-md bg-black text-white ring-1 ring-white/40 hover:ring-white/90">
-          <a
-            href={`https://www.papermark.io?utm_campaign=poweredby&utm_medium=poweredby&utm_source=papermark-${linkId}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="rounded-sm text-sm"
-            style={{ paddingInlineStart: "12px", paddingInlineEnd: "12px" }}
-          >
-            Share docs via{" "}
-            <span className="font-semibold tracking-tighter">Papermark</span>
-          </a>
-        </div>
+    <div className="absolute bottom-6 right-6 z-[100] w-fit">
+      <div className="pointer-events-auto relative z-20 flex min-h-8 w-auto items-center justify-end whitespace-nowrap rounded-md bg-black text-white ring-1 ring-white/40 hover:ring-white/90">
+        <a
+          href={`https://www.papermark.io?utm_campaign=poweredby&utm_medium=poweredby&utm_source=papermark-${linkId}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-sm text-sm"
+          style={{ paddingInlineStart: "12px", paddingInlineEnd: "12px" }}
+        >
+          Share docs via{" "}
+          <span className="font-semibold tracking-tighter">Papermark</span>
+        </a>
       </div>
     </div>,
     document.body,

components/view/toolbar.tsx

@@ -100,7 +100,7 @@ export default function Toolbar({
                     label={reaction.label}
                   />
                 ))}
-                <GripVertical className="moveable-icon h-5 w-5 text-gray-100 active:text-gray-300" />
+                <GripVertical className="moveable-icon h-5 w-5 cursor-grab text-gray-100 active:cursor-grabbing active:text-gray-300" />
               </div>
             </div>
           </div>

components/view/viewer/image-viewer.tsx

@@ -305,36 +305,40 @@ export default function ImageViewer({
           )}
           ref={containerRef}
         >
-          <div className={cn("h-full w-full", scale > 1 && "overflow-auto")}>
+          <div
+            style={{ height: "calc(100dvh - 64px)" }}
+            onContextMenu={(e) => e.preventDefault()}
+            className="block max-w-full overflow-auto"
+          >
             <div
-              className="flex min-h-full w-full items-center justify-center"
+              className={cn(
+                "viewer-container relative mx-auto w-full",
+                "flex justify-center",
+              )}
               style={{
-                transform: `scale(${scale})`,
-                transition: "transform 0.2s ease-out",
-                transformOrigin: scale <= 1 ? "center center" : "left top",
-                minWidth: scale > 1 ? `${100 * scale}%` : "100%",
+                width: `${imageDimensions?.width ? scale * imageDimensions.width + "px" : "auto"}`,
+                height: `${imageDimensions?.height && scale > 1 ? scale * imageDimensions?.height + "px" : "calc(100dvh - 64px)"}`,
+                transition: "width 0.2s ease-in-out",
               }}
-              onContextMenu={(e) => e.preventDefault()}
             >
-              <div className="viewer-container relative my-auto flex w-full justify-center">
-                <img
-                  className="!pointer-events-auto max-h-[calc(100dvh-64px)] object-contain"
-                  ref={(ref) => {
-                    imageRefs.current = ref;
-                    if (ref) {
-                      ref.onload = () =>
-                        setImageDimensions({
-                          width: ref.clientWidth,
-                          height: ref.clientHeight,
-                        });
-                    }
-                  }}
-                  src={file}
-                  alt="Image 1"
-                />
-
-                {/* Add Watermark Component */}
-                {watermarkConfig ? (
+              <img
+                className="!pointer-events-auto object-contain"
+                ref={(ref) => {
+                  imageRefs.current = ref;
+                  if (ref) {
+                    ref.onload = () =>
+                      setImageDimensions({
+                        width: ref.clientWidth,
+                        height: ref.clientHeight,
+                      });
+                  }
+                }}
+                src={file}
+                alt="Image 1"
+              />
+              {/* Add Watermark Component */}
+              {watermarkConfig ? (
+                <div className="pointer-events-none absolute flex h-full w-full items-center justify-center [&>svg]:!top-auto">
                   <SVGWatermark
                     config={watermarkConfig}
                     viewerData={{
@@ -344,13 +348,18 @@ export default function ImageViewer({
                       link: linkName,
                       ipAddress: ipAddress,
                     }}
-                    documentDimensions={
-                      imageDimensions ?? { width: 0, height: 0 }
-                    }
+                    documentDimensions={{
+                      width: imageDimensions?.width
+                        ? scale * imageDimensions?.width
+                        : 0,
+                      height: imageDimensions?.height
+                        ? scale * imageDimensions?.height
+                        : 0,
+                    }}
                     pageIndex={0}
                   />
-                ) : null}
-              </div>
+                </div>
+              ) : null}
             </div>
           </div>
         </div>