Adjust width override and fix submission hack for closing details

Author: brookslybrand

app/routes/docs.$lang.$ref.tsx

@@ -268,7 +268,7 @@ function VersionSelect() {
         </svg>
       </summary>
       <DetailsPopup>
-        <div className="flex flex-col gap-px">
+        <div className="flex w-40 flex-col gap-px">
           <VersionsLabel label="Branches" />
           {branches.map((branch) => {
             return (
@@ -390,7 +390,7 @@ function ColorSchemeToggle() {
           replace
           action="/_actions/color-scheme"
           method="post"
-          className="flex flex-col gap-px"
+          className="flex w-40 flex-col gap-px"
         >
           <input
             type="hidden"
@@ -547,7 +547,7 @@ function HeaderMenuMobile({ className = "" }: { className: string }) {
         </svg>
       </summary>
       <DetailsPopup>
-        <div className="flex flex-col">
+        <div className="flex w-40 flex-col">
           <HeaderMenuLink to="/docs">Docs</HeaderMenuLink>
           <HeaderMenuLink to="/blog">Blog</HeaderMenuLink>
           <HeaderMenuLink to="/showcase">Showcase</HeaderMenuLink>

app/ui/details-menu.tsx

@@ -1,5 +1,4 @@
 import { forwardRef, useState, useRef, useEffect } from "react";
-import type { PropsWithChildren } from "react";
 import { useLocation, useNavigation } from "@remix-run/react";
 import cx from "clsx";
 
@@ -80,21 +79,14 @@ export const DetailsMenu = forwardRef<
 DetailsMenu.displayName = "DetailsMenu";
 
 type DetailsPopupProps = {
+  children: React.ReactNode;
   className?: string;
 };
 
-export function DetailsPopup({
-  children,
-  className,
-}: PropsWithChildren<DetailsPopupProps>) {
+export function DetailsPopup({ children, className }: DetailsPopupProps) {
   return (
-    // TODO: remove the width being defined here. Seems like it should be a min-width: fit-content or something, and anything more specific defined by the children passed in (or a className)
-    <div className={cx("absolute right-0 z-20 w-40 md:left-0", className)}>
-      <div
-        className={
-          "relative top-1 rounded-md border border-gray-100 bg-white p-1 shadow-sm  dark:border-gray-800 dark:bg-gray-900"
-        }
-      >
+    <div className={cx("absolute right-0 z-20 min-w-max md:left-0", className)}>
+      <div className="relative top-1 rounded-md border border-gray-100 bg-white p-1 shadow-sm  dark:border-gray-800 dark:bg-gray-900">
         {children}
       </div>
     </div>

app/ui/header.tsx

@@ -65,7 +65,7 @@ function HeaderMenuMobile({ className = "" }: { className: string }) {
         </svg>
       </summary>
       <DetailsPopup>
-        <nav className="flex flex-col gap-2 px-2 py-2.5">
+        <nav className="flex w-40 flex-col gap-2 px-2 py-2.5">
           <HeaderLink to="/docs/en/main">Docs</HeaderLink>
           <HeaderLink to="/blog">Blog</HeaderLink>
           <HeaderLink to="/showcase">Showcase</HeaderLink>

app/ui/resources.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { type Resource } from "~/lib/resources.server";
 import { transformNpmCommand } from "~/lib/transformNpmCommand";
 import type { PackageManager } from "~/lib/transformNpmCommand";
 import { DetailsMenu, DetailsPopup } from "./details-menu";
 
-import { Link, useSearchParams, useSubmit } from "@remix-run/react";
+import { Link, useSearchParams } from "@remix-run/react";
 import cx from "clsx";
 import iconsHref from "~/icons.svg";
 
@@ -70,18 +70,12 @@ export function InitCodeblock({
   // Probably a more elegant solution, but this is what I've got
   let [npxOrNpmMaybe, ...otherCode] = initCommand.trim().split(" ");
   let [copied, setCopied] = useState(false);
-  const submit = useSubmit();
 
   function handleCopy(packageManager: PackageManager) {
     setCopied(true);
     navigator.clipboard.writeText(
       transformNpmCommand(npxOrNpmMaybe, otherCode.join(" "), packageManager),
     );
-    // This is a hack to close the details menu after clicking
-    submit(null, {
-      preventScrollReset: true,
-      replace: true,
-    });
   }
 
   // Reset copied state after 4 seconds
@@ -134,8 +128,14 @@ type CopyCodeBlockProps = {
 };
 
 function CopyCodeBlock({ copied, onCopy }: CopyCodeBlockProps) {
+  const detailsRef = useRef<HTMLDetailsElement>(null);
   return (
-    <DetailsMenu className="absolute" data-copied={copied} data-code-block-copy>
+    <DetailsMenu
+      className="absolute"
+      data-copied={copied}
+      data-code-block-copy
+      ref={detailsRef}
+    >
       <summary
         className="_no-triangle block outline-offset-2"
         data-copied={copied}
@@ -155,18 +155,17 @@ function CopyCodeBlock({ copied, onCopy }: CopyCodeBlockProps) {
           <span className="sr-only">Copy code to clipboard</span>
         </span>
       </summary>
-      <div className="absolute left-auto right-0 top-10 w-[110px]">
-        <DetailsPopup
-          // TODO: remove when we get the DetailsPopup figured out
-          className="w-full" // ehhh, we'll see
-        >
+      <div className="absolute right-0 w-28">
+        <DetailsPopup>
           <div className="flex flex-col">
             {(["npm", "yarn", "pnpm", "bun"] as const).map((packageManager) => (
               <button
                 key={packageManager}
                 className="rounded-md p-1.5 text-left text-sm text-gray-700 hover:bg-blue-200/50 hover:text-black dark:text-gray-400 dark:hover:bg-blue-800/50 dark:hover:text-gray-100"
                 onClick={() => {
                   onCopy(packageManager);
+                  // Close the details menu
+                  detailsRef.current?.toggleAttribute("open");
                 }}
               >
                 {packageManager}