Fix breakpoint mismatch and stabilize copyToClipboard reference

cursoragent · juliusmarminge · cursoragent · commit 152076a0b563 · 2026-03-13T03:24:39.000Z
- Change BREAKPOINTS.md from 800 to 768 to match Tailwind CSS v4's default
  md breakpoint, fixing the 768-799px gap where the sidebar trigger was
  hidden but the sidebar was in mobile sheet mode.

- Wrap copyToClipboard in useCallback with refs for onCopy/onError/timeout
  so the returned function identity is stable across renders, preventing
  unnecessary re-creation of downstream useCallback hooks.

Co-authored-by: Julius Marminge &lt;juliusmarminge@users.noreply.github.com&gt;
diff --git a/apps/web/src/hooks/useCopyToClipboard.ts b/apps/web/src/hooks/useCopyToClipboard.ts
@@ -11,8 +11,15 @@ export function useCopyToClipboard<TContext = void>({
 } = {}): { copyToClipboard: (value: string, ctx: TContext) => void; isCopied: boolean } {
   const [isCopied, setIsCopied] = React.useState(false);
   const timeoutIdRef = React.useRef<NodeJS.Timeout | null>(null);
+  const onCopyRef = React.useRef(onCopy);
+  const onErrorRef = React.useRef(onError);
+  const timeoutRef = React.useRef(timeout);
 
-  const copyToClipboard = (value: string, ctx: TContext): void => {
+  onCopyRef.current = onCopy;
+  onErrorRef.current = onError;
+  timeoutRef.current = timeout;
+
+  const copyToClipboard = React.useCallback((value: string, ctx: TContext): void => {
     if (typeof window === "undefined" || !navigator.clipboard?.writeText) {
       return;
     }
@@ -26,26 +33,24 @@ export function useCopyToClipboard<TContext = void>({
         }
         setIsCopied(true);
 
-        if (onCopy) {
-          onCopy(ctx);
-        }
+        onCopyRef.current?.(ctx);
 
-        if (timeout !== 0) {
+        if (timeoutRef.current !== 0) {
           timeoutIdRef.current = setTimeout(() => {
             setIsCopied(false);
             timeoutIdRef.current = null;
-          }, timeout);
+          }, timeoutRef.current);
         }
       },
       (error) => {
-        if (onError) {
-          onError(error, ctx);
+        if (onErrorRef.current) {
+          onErrorRef.current(error, ctx);
         } else {
           console.error(error);
         }
       },
     );
-  };
+  }, []);
 
   // Cleanup timeout on unmount
   React.useEffect(() => {
diff --git a/apps/web/src/hooks/useMediaQuery.ts b/apps/web/src/hooks/useMediaQuery.ts
@@ -5,7 +5,7 @@ const BREAKPOINTS = {
   "3xl": 1600,
   "4xl": 2000,
   lg: 1024,
-  md: 800,
+  md: 768,
   sm: 640,
   xl: 1280,
 } as const;
