perfect zooming features and bug fixes

Author: ahmedkhaleel2004

src/components/export-dropdown.tsx

@@ -16,7 +16,7 @@ export function ExportDropdown({
 }: ExportDropdownProps) {
   return (
     <div className="space-y-4">
-      <div className="flex flex-row gap-3 sm:gap-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:gap-4">
         <ActionButton
           onClick={onExportImage}
           icon={Image}

src/components/header.tsx

@@ -42,13 +42,13 @@ export function Header() {
             </span>
           </span>
         </Link>
-        <nav className="flex items-center gap-6">
-          <Link
+        <nav className="flex items-center gap-2 sm:gap-6">
+          {/* <Link
             href="https://api.gitdiagram.com"
             className="text-sm font-medium text-black transition-transform hover:translate-y-[-2px] hover:text-purple-600"
           >
             API
-          </Link>
+          </Link> */}
           <span
             onClick={() => setIsPrivateReposDialogOpen(true)}
             className="cursor-pointer text-sm font-medium text-black transition-transform hover:translate-y-[-2px] hover:text-purple-600"

src/components/mermaid-diagram.tsx

@@ -73,7 +73,7 @@ const MermaidChart = ({ chart, zoomingEnabled = true }: MermaidChartProps) => {
       if (svgElement) {
         try {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-          svgPanZoom(svgElement).destroy();
+          // svgPanZoom(svgElement).destroy();
         } catch (error) {
           console.error("Failed to destroy pan-zoom instance:", error);
         }
@@ -82,8 +82,18 @@ const MermaidChart = ({ chart, zoomingEnabled = true }: MermaidChartProps) => {
   }, [chart, zoomingEnabled]); // Added zoomingEnabled to dependencies
 
   return (
-    <div ref={containerRef} className="h-[600px] w-full max-w-full p-4">
-      <div className="mermaid h-full">{chart}</div>
+    <div
+      ref={containerRef}
+      className={`w-full max-w-full p-4 ${zoomingEnabled ? "h-[600px]" : ""}`}
+    >
+      <div
+        key={`${chart}-${zoomingEnabled}`}
+        className={`mermaid h-full ${
+          zoomingEnabled ? "rounded-lg border-2 border-black" : ""
+        }`}
+      >
+        {chart}
+      </div>
     </div>
   );
 };