Responsive improvements (dubinc#3670)

Co-authored-by: Steven Tey <stevensteel97@gmail.com>

Author: marcusljf

apps/web/app/(ee)/app.dub.co/(new-program)/header.tsx

@@ -15,14 +15,14 @@ import { useSidebar } from "./sidebar-context";
 
 export function ProgramOnboardingHeader() {
   const pathname = usePathname();
-  const { isMobile } = useMediaQuery();
+  const { isDesktop } = useMediaQuery();
   const { getValues } = useFormContext();
   const { isOpen, setIsOpen } = useSidebar();
   const { id: workspaceId, slug: workspaceSlug } = useWorkspace();
 
   useEffect(() => {
-    document.body.style.overflow = isOpen && isMobile ? "hidden" : "auto";
-  }, [isOpen, isMobile]);
+    document.body.style.overflow = isOpen && !isDesktop ? "hidden" : "auto";
+  }, [isOpen, isDesktop]);
 
   const { executeAsync, isPending } = useAction(onboardProgramAction, {
     onError: ({ error }) => {
@@ -62,14 +62,14 @@ export function ProgramOnboardingHeader() {
       <div className="flex items-center gap-5">
         <button
           onClick={() => setIsOpen(true)}
-          className="rounded-md p-1 hover:bg-neutral-100 md:hidden"
+          className="rounded-md p-1 hover:bg-neutral-100 lg:hidden"
         >
           <Menu className="h-5 w-5 text-neutral-600" />
         </button>
         <Link href={`/${workspaceSlug}`} className="flex items-center">
           <Wordmark className="h-7" />
         </Link>
-        <h1 className="hidden text-base font-semibold text-neutral-700 md:block">
+        <h1 className="hidden text-base font-semibold text-neutral-700 lg:block">
           Create partner program
         </h1>
       </div>

apps/web/app/(ee)/app.dub.co/(new-program)/layout.tsx

@@ -11,9 +11,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <div className="min-h-screen bg-white">
         <ProgramOnboardingFormWrapper>
           <ProgramOnboardingHeader />
-          <div className="md:grid md:grid-cols-[240px_minmax(0,1fr)]">
+          <div className="lg:grid lg:grid-cols-[240px_minmax(0,1fr)]">
             <ProgramOnboardingSteps />
-            <main className="px-4 py-6 md:px-8">{children}</main>
+            <main className="px-4 py-6 lg:px-8">{children}</main>
           </div>
         </ProgramOnboardingFormWrapper>
       </div>

apps/web/app/(ee)/app.dub.co/(new-program)/steps.tsx

@@ -13,15 +13,15 @@ import { useSidebar } from "./sidebar-context";
 
 export function ProgramOnboardingSteps() {
   const pathname = usePathname();
-  const { isMobile } = useMediaQuery();
+  const { isDesktop } = useMediaQuery();
   const { isOpen, setIsOpen } = useSidebar();
   const { slug } = useParams<{ slug: string }>();
   const [programOnboarding] =
     useWorkspaceStore<ProgramData>("programOnboarding");
 
   useEffect(() => {
-    document.body.style.overflow = isOpen && isMobile ? "hidden" : "auto";
-  }, [isOpen, isMobile]);
+    document.body.style.overflow = isOpen && !isDesktop ? "hidden" : "auto";
+  }, [isOpen, isDesktop]);
 
   const currentPath = pathname.replace(`/${slug}`, "");
 
@@ -40,10 +40,10 @@ export function ProgramOnboardingSteps() {
     <>
       <div
         className={cn(
-          "fixed left-0 top-14 z-20 h-[calc(100vh-3.5rem)] w-screen transition-[background-color,backdrop-filter] md:sticky md:top-0 md:z-0 md:h-[calc(100vh-3.5rem)] md:w-full md:bg-transparent",
+          "fixed left-0 top-14 z-20 h-[calc(100vh-3.5rem)] w-screen transition-[background-color,backdrop-filter] lg:sticky lg:top-0 lg:z-0 lg:h-[calc(100vh-3.5rem)] lg:w-full lg:bg-transparent",
           isOpen
             ? "bg-black/20 backdrop-blur-sm"
-            : "bg-transparent max-md:pointer-events-none",
+            : "bg-transparent max-lg:pointer-events-none",
         )}
         onClick={(e) => {
           if (e.target === e.currentTarget) {
@@ -54,12 +54,12 @@ export function ProgramOnboardingSteps() {
       >
         <div
           className={cn(
-            "relative h-full w-[240px] max-w-full bg-white transition-transform md:translate-x-0",
+            "relative h-full w-[240px] max-w-full bg-white transition-transform lg:translate-x-0",
             !isOpen && "-translate-x-full",
           )}
         >
           <div className="p-4">
-            <div className="mb-4 flex items-center justify-between md:hidden">
+            <div className="mb-4 flex items-center justify-between lg:hidden">
               <h2 className="text-sm font-medium">Program Setup</h2>
               <button
                 onClick={() => setIsOpen(false)}

apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/page-client.tsx

@@ -642,7 +642,7 @@ function BrandedChart({
 function ViewMoreButton({ href }: { href: string }) {
   return (
     <div className="-mr-2 overflow-hidden pr-2 [mask-image:linear-gradient(270deg,transparent,black_8px)] [mask-origin:padding-box]">
-      <div className="overflow-visible transition-all duration-200 focus-within:w-[82px] focus-within:opacity-100 group-hover:w-[82px] group-hover:opacity-100 sm:w-0 sm:opacity-0">
+      <div className="overflow-visible transition-all duration-200 focus-within:w-[82px] focus-within:opacity-100 group-hover:w-[82px] group-hover:opacity-100 lg:w-0 lg:opacity-0">
         <Link
           href={href}
           className={cn(

apps/web/ui/layout/main-nav.tsx

@@ -40,29 +40,29 @@ export function MainNav({
 }>) {
   const pathname = usePathname();
 
-  const { isMobile } = useMediaQuery();
+  const { isDesktop } = useMediaQuery();
   const [isOpen, setIsOpen] = useState(false);
   const isUpgradeBannerVisible = useUpgradeBannerVisible();
 
   // Prevent body scroll when side nav is open
   useEffect(() => {
-    document.body.style.overflow = isOpen && isMobile ? "hidden" : "auto";
-  }, [isOpen, isMobile]);
+    document.body.style.overflow = isOpen && !isDesktop ? "hidden" : "auto";
+  }, [isOpen, isDesktop]);
 
   // Close side nav when pathname changes
   useEffect(() => {
     setIsOpen(false);
   }, [pathname]);
 
   return (
-    <div className="min-h-screen md:grid md:grid-cols-[min-content_minmax(0,1fr)]">
+    <div className="min-h-screen lg:grid lg:grid-cols-[min-content_minmax(0,1fr)]">
       {/* Side nav backdrop */}
       <div
         className={cn(
-          "fixed left-0 z-50 w-screen transition-[background-color,backdrop-filter] md:sticky md:z-auto md:w-full md:bg-transparent",
+          "fixed left-0 z-50 w-screen transition-[background-color,backdrop-filter] lg:sticky lg:z-auto lg:w-full lg:bg-transparent",
           isOpen
             ? "bg-black/20 backdrop-blur-sm"
-            : "bg-transparent max-md:pointer-events-none",
+            : "bg-transparent max-lg:pointer-events-none",
           isUpgradeBannerVisible
             ? "top-12 h-[calc(100dvh-48px)]"
             : "top-0 h-dvh",
@@ -77,7 +77,7 @@ export function MainNav({
         {/* Side nav */}
         <div
           className={cn(
-            "relative h-full w-min max-w-full bg-neutral-200 transition-transform md:translate-x-0",
+            "relative h-full w-min max-w-full bg-neutral-200 transition-transform lg:translate-x-0",
             !isOpen && "-translate-x-full",
           )}
         >
@@ -86,11 +86,11 @@ export function MainNav({
       </div>
       <div
         className={cn(
-          "bg-neutral-200 pb-[var(--page-bottom-margin)] pt-[var(--page-top-margin)] [--page-bottom-margin:0px] [--page-top-margin:0px] md:pb-2 md:pr-2 md:[--page-bottom-margin:0.5rem] md:[--page-top-margin:0.5rem]",
+          "bg-neutral-200 pb-[var(--page-bottom-margin)] pt-[var(--page-top-margin)] [--page-bottom-margin:0px] [--page-top-margin:0px] lg:pb-2 lg:pr-2 lg:[--page-bottom-margin:0.5rem] lg:[--page-top-margin:0.5rem]",
           isUpgradeBannerVisible ? "mt-12 h-[calc(100vh-48px)]" : "h-screen",
         )}
       >
-        <div className="relative h-full overflow-y-auto bg-neutral-100 pt-px md:rounded-xl md:bg-white">
+        <div className="relative h-full overflow-y-auto bg-neutral-100 pt-px lg:rounded-xl lg:bg-white">
           <SideNavContext.Provider value={{ isOpen, setIsOpen }}>
             {children}
           </SideNavContext.Provider>

apps/web/ui/layout/page-content/index.tsx

@@ -21,7 +21,7 @@ export function PageContent({
   return (
     <div
       className={cn(
-        "flex min-h-full flex-col rounded-t-[inherit] bg-neutral-100 md:bg-white",
+        "flex min-h-full flex-col rounded-t-[inherit] bg-neutral-100 lg:bg-white",
         className,
       )}
     >

apps/web/ui/layout/page-content/nav-button.tsx

@@ -13,7 +13,7 @@ export function NavButton() {
       variant="outline"
       onClick={() => setIsOpen((o) => !o)}
       icon={<LayoutSidebar className="size-4" />}
-      className="h-auto w-fit p-1 md:hidden"
+      className="h-auto w-fit p-1 lg:hidden"
     />
   );
 }

apps/web/ui/layout/page-content/page-content-old.tsx

@@ -34,8 +34,8 @@ export function PageContentOld({
   return (
     <div
       className={cn(
-        "mt-3 bg-neutral-100 md:bg-white",
-        (hasTitle || hasDescription) && "md:mt-6 md:py-3",
+        "mt-3 bg-neutral-100 lg:bg-white",
+        (hasTitle || hasDescription) && "lg:mt-6 lg:py-3",
         className,
       )}
     >
@@ -61,18 +61,18 @@ export function PageContentOld({
                   </div>
                 )}
                 {hasDescription && (
-                  <p className="mt-1 hidden text-base text-neutral-500 md:block">
+                  <p className="mt-1 hidden text-base text-neutral-500 lg:block">
                     {description}
                   </p>
                 )}
               </div>
             )}
           </div>
           {titleControls && (
-            <div className="hidden md:block">{titleControls}</div>
+            <div className="hidden lg:block">{titleControls}</div>
           )}
           {showControls && (
-            <div className="flex items-center gap-4 md:hidden">
+            <div className="flex items-center gap-4 lg:hidden">
               <HelpButton />
               <UserDropdown />
             </div>
@@ -81,13 +81,13 @@ export function PageContentOld({
       </MaxWidthWrapper>
       <div
         className={cn(
-          "bg-white pt-2.5 max-md:mt-3 max-md:rounded-t-[16px]",
+          "bg-white pt-2.5 max-lg:mt-3 max-lg:rounded-t-[16px]",
           contentWrapperClassName,
         )}
       >
         {hasDescription && (
           <MaxWidthWrapper>
-            <p className="mb-3 mt-1 text-base text-neutral-500 md:hidden">
+            <p className="mb-3 mt-1 text-base text-neutral-500 lg:hidden">
               {description}
             </p>
           </MaxWidthWrapper>

apps/web/ui/layout/page-content/page-content-with-side-panel.tsx

@@ -55,7 +55,7 @@ export function PageContentWithSidePanel({
     >
       <div
         className={cn(
-          "@container/page-content relative grid min-h-[var(--page-height)] grid-cols-[minmax(340px,1fr)_minmax(0,min-content)] rounded-t-[inherit] bg-neutral-100 [--page-height:calc(100dvh-var(--page-top-margin)-var(--page-bottom-margin)-1px)] md:bg-white",
+          "@container/page-content relative grid min-h-[var(--page-height)] grid-cols-[minmax(340px,1fr)_minmax(0,min-content)] rounded-t-[inherit] bg-neutral-100 [--page-height:calc(100dvh-var(--page-top-margin)-var(--page-bottom-margin)-1px)] lg:bg-white",
           individualScrolling && "h-[var(--page-height)]",
           className,
         )}