This stuff doesn't work.

src/app/components/header/DesktopHeader.tsx

@@ -1,12 +1,9 @@
 import { HeaderNavItem, type HeaderNavItemSubProps } from "./HeaderNavItem";
 import Link from "next/link";
-import { MOBILE_HEADER_BREAKPOINT } from "~/config/constants";
 
 export function DesktopHeader() {
     return (
-        <header
-            className={`hidden w-full flex-col gap-2 min-[${MOBILE_HEADER_BREAKPOINT}px]:flex`}
-        >
+        <header className={`hidden w-full flex-col gap-2 min-[650px]:flex`}>
             <Link href="/">
                 <h1 className="w-full text-center font-title text-4xl">
                     Santa Cruz Contra Dance

src/app/components/header/MobileHeader.tsx

@@ -7,13 +7,12 @@ import {
 } from "~/components/ui/popover";
 import { HeaderNavItem, type HeaderNavItemSubProps } from "./HeaderNavItem";
 import Link from "next/link";
-import { MOBILE_HEADER_BREAKPOINT } from "~/config/constants";
 
 export function MobileHeader() {
     return (
         <>
             <header
-                className={`relative flex w-full flex-col min-[${MOBILE_HEADER_BREAKPOINT}px]:hidden`}
+                className={`relative flex w-full flex-col min-[650px]:hidden`}
             >
                 <MobilePopoverNav />
                 <div className="flex flex-col items-start gap-2 p-4">
@@ -36,9 +35,7 @@ function MobilePopoverNav() {
     }, [setNavOpen]);
 
     useEffect(() => {
-        const mediaQuery = window.matchMedia(
-            `(min-width:${MOBILE_HEADER_BREAKPOINT}px)`,
-        );
+        const mediaQuery = window.matchMedia(`(min-width:650px)`);
 
         const closeOnMatch = (e: MediaQueryListEvent) => {
             if (e.matches) closeNav();