feat: migrate workspace to Tailwind CSS v4 (#377)

* feat: migrate workspace to Tailwind CSS v4

* refactor: move Tailwind v4 setup to CSS directives

apps/web/src/app/(dashboard)/dasboard-layout.tsx

@@ -1,19 +1,40 @@
 "use client";
 
 import { AppSidebar } from "~/components/AppSideBar";
-import { SidebarInset, SidebarProvider, SidebarTrigger } from "@usesend/ui/src/sidebar";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@usesend/ui/src/sidebar";
 import { useIsMobile } from "@usesend/ui/src/hooks/use-mobile";
 import { UpgradeModal } from "~/components/payments/UpgradeModal";
+import { usePathname } from "next/navigation";
+import { useEffect, useRef } from "react";
 
 export function DashboardLayout({ children }: { children: React.ReactNode }) {
   const isMobile = useIsMobile();
+  const pathname = usePathname();
+  const mainRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (mainRef.current) {
+      mainRef.current.scrollLeft = 0;
+    }
+
+    window.scrollTo({ left: 0 });
+    document.documentElement.scrollLeft = 0;
+    document.body.scrollLeft = 0;
+  }, [pathname]);
 
   return (
     <div className="h-full bg-sidebar-background">
       <SidebarProvider>
         <AppSidebar />
-        <SidebarInset>
-          <main className="flex-1 overflow-auto h-full p-4 xl:px-40">
+        <SidebarInset className="min-w-0">
+          <main
+            ref={mainRef}
+            className="h-full flex-1 overflow-y-auto overflow-x-hidden p-4 xl:px-40"
+          >
             {isMobile ? (
               <SidebarTrigger className="h-5 w-5 text-muted-foreground" />
             ) : null}

apps/web/src/app/(dashboard)/webhooks/add-webhook.tsx

@@ -267,7 +267,7 @@ export function AddWebhook() {
                               <ChevronDown className="ml-2 h-4 w-4 shrink-0" />
                             </Button>
                           </DropdownMenuTrigger>
-                          <DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width] h-[30vh] ">
+                          <DropdownMenuContent className="h-[30vh] w-[var(--radix-dropdown-menu-trigger-width)]">
                             <div className="space-y-3">
                               <DropdownMenuCheckboxItem
                                 checked={allEventsSelected}
@@ -362,7 +362,7 @@ export function AddWebhook() {
                               <ChevronDown className="ml-2 h-4 w-4 shrink-0" />
                             </Button>
                           </DropdownMenuTrigger>
-                          <DropdownMenuContent className="max-h-[30vh] w-[--radix-dropdown-menu-trigger-width] overflow-y-auto">
+                          <DropdownMenuContent className="max-h-[30vh] w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto">
                             <div className="space-y-3">
                               <DropdownMenuCheckboxItem
                                 checked={selectedDomainIds.length === 0}

apps/web/src/app/(dashboard)/webhooks/webhook-update-dialog.tsx

@@ -260,7 +260,7 @@ export function EditWebhookDialog({
                               <ChevronDown className="ml-2 h-4 w-4 shrink-0" />
                             </Button>
                           </DropdownMenuTrigger>
-                          <DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width] h-[30vh]">
+                          <DropdownMenuContent className="h-[30vh] w-[var(--radix-dropdown-menu-trigger-width)]">
                             <div className="space-y-3">
                               <DropdownMenuCheckboxItem
                                 checked={allEventsSelected}
@@ -355,7 +355,7 @@ export function EditWebhookDialog({
                               <ChevronDown className="ml-2 h-4 w-4 shrink-0" />
                             </Button>
                           </DropdownMenuTrigger>
-                          <DropdownMenuContent className="max-h-[30vh] w-[--radix-dropdown-menu-trigger-width] overflow-y-auto">
+                          <DropdownMenuContent className="max-h-[30vh] w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto">
                             <div className="space-y-3">
                               <DropdownMenuCheckboxItem
                                 checked={selectedDomainIds.length === 0}

apps/web/src/app/globals.css

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+
+@source "../**/*.{js,jsx,ts,tsx,mdx}";
+@source "../../../../packages/ui/src/**/*.{js,jsx,ts,tsx,mdx}";
+@source "../../../../packages/email-editor/src/**/*.{js,jsx,ts,tsx,mdx}";
+@source "../../../../packages/lib/src/**/*.{js,jsx,ts,tsx,mdx}";
+
+@import "@usesend/ui/styles/globals.css";

apps/web/src/app/layout.tsx

@@ -1,4 +1,4 @@
-import "@usesend/ui/styles/globals.css";
+import "./globals.css";
 
 import { Inter } from "next/font/google";
 import { JetBrains_Mono } from "next/font/google";

apps/web/src/components/AppSideBar.tsx

@@ -323,7 +323,7 @@ export function NavUser({
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent
-            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-xl"
+            className="w-[var(--radix-dropdown-menu-trigger-width)] min-w-56 rounded-xl"
             side={isMobile ? "bottom" : "top"}
             sideOffset={4}
           >