[getsentry/action-github-commit] Auto commit

Author: getsantry[bot]

src/components/copyMarkdownButton.tsx

@@ -41,6 +41,7 @@ export function CopyMarkdownButton({pathname}: CopyMarkdownButtonProps) {
     }
   };
 
+  // Set mounted state and close dropdown on outside click
   useEffect(() => {
     setIsMounted(true);
 
@@ -72,9 +73,12 @@ export function CopyMarkdownButton({pathname}: CopyMarkdownButtonProps) {
     };
   };
 
-  const buttonClass = "inline-flex items-center h-full text-gray-700 bg-transparent border-none cursor-pointer transition-colors duration-150 hover:bg-gray-50 active:bg-gray-100 focus:bg-gray-50 outline-none";
-  const dropdownItemClass = "flex items-center gap-3 w-full p-2 px-3 text-left bg-transparent rounded-md transition-colors hover:bg-gray-100 font-sans text-gray-900";
-  const iconContainerClass = "flex items-center justify-center w-7 h-7 bg-gray-100 rounded shrink-0";
+  const buttonClass =
+    'inline-flex items-center h-full text-gray-700 bg-transparent border-none cursor-pointer transition-colors duration-150 hover:bg-gray-50 active:bg-gray-100 focus:bg-gray-50 outline-none';
+  const dropdownItemClass =
+    'flex items-center gap-3 w-full p-2 px-3 text-left bg-transparent rounded-md transition-colors hover:bg-gray-100 font-sans text-gray-900';
+  const iconContainerClass =
+    'flex items-center justify-center w-7 h-7 bg-gray-100 rounded shrink-0';
 
   return (
     <Fragment>
@@ -107,49 +111,59 @@ export function CopyMarkdownButton({pathname}: CopyMarkdownButtonProps) {
         </div>
       </div>
 
-      {isMounted && isOpen && createPortal(
-        <div
-          ref={dropdownRef}
-          className="fixed w-80 bg-white rounded-xl shadow-lg overflow-hidden z-[9999]"
-          style={{...getDropdownPosition(), border: '1px solid #d1d5db'}}
-        >
-          <div className="p-1">
-            <button
-              onClick={() => {
-                copyMarkdownToClipboard();
-                setIsOpen(false);
-              }}
-              className={`${dropdownItemClass} border-none cursor-pointer disabled:opacity-50`}
-              disabled={isLoading}
-            >
-              <div className={iconContainerClass}>
-                <Clipboard size={14} />
-              </div>
-              <div className="flex-1">
-                <div className="font-medium text-gray-900 text-sm leading-5">Copy page</div>
-                <div className="text-xs text-gray-500 leading-4">Copy page as Markdown for LLMs</div>
-              </div>
-            </button>
-
-            <Link
-              href={`/${pathname}.md`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={`${dropdownItemClass} no-underline`}
-              onClick={() => setIsOpen(false)}
-            >
-              <div className={iconContainerClass}>
-                <Markdown width={14} height={14} />
-              </div>
-              <div className="flex-1">
-                <div className="font-medium text-gray-900 text-sm leading-5">View as Markdown</div>
-                <div className="text-xs text-gray-500 leading-4">View this page as plain text</div>
-              </div>
-            </Link>
-          </div>
-        </div>,
-        document.body
-      )}
+      {isMounted &&
+        isOpen &&
+        createPortal(
+          <div
+            ref={dropdownRef}
+            className="fixed w-80 bg-white rounded-xl shadow-lg overflow-hidden z-[9999]"
+            style={{...getDropdownPosition(), border: '1px solid #d1d5db'}}
+          >
+            <div className="p-1">
+              <button
+                onClick={() => {
+                  copyMarkdownToClipboard();
+                  setIsOpen(false);
+                }}
+                className={`${dropdownItemClass} border-none cursor-pointer disabled:opacity-50`}
+                disabled={isLoading}
+              >
+                <div className={iconContainerClass}>
+                  <Clipboard size={14} />
+                </div>
+                <div className="flex-1">
+                  <div className="font-medium text-gray-900 text-sm leading-5">
+                    Copy page
+                  </div>
+                  <div className="text-xs text-gray-500 leading-4">
+                    Copy page as Markdown for LLMs
+                  </div>
+                </div>
+              </button>
+
+              <Link
+                href={`/${pathname}.md`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`${dropdownItemClass} no-underline`}
+                onClick={() => setIsOpen(false)}
+              >
+                <div className={iconContainerClass}>
+                  <Markdown width={14} height={14} />
+                </div>
+                <div className="flex-1">
+                  <div className="font-medium text-gray-900 text-sm leading-5">
+                    View as Markdown
+                  </div>
+                  <div className="text-xs text-gray-500 leading-4">
+                    View this page as plain text
+                  </div>
+                </div>
+              </Link>
+            </div>
+          </div>,
+          document.body
+        )}
     </Fragment>
   );
 }