Merge pull request #17 from olliethedev/fix/next-hydration

fix: nextjs hydration warnings

Author: olliethedev

components/ui/ui-builder/internal/classname-control/breakpoint-classname-control.tsx

@@ -116,12 +116,12 @@ export const BreakpointClassNameControl = ({
             <TabsTrigger value="base" data-testid="base-tab-trigger">
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <>
+                  <div className="flex items-center">
                     <span>Base</span>
                     {base && (
                       <Badge className="ml-1 justify-center text-center px-[3px] h-[18px] min-w-[18px] !text-[10px]">{base.split(" ").filter(Boolean).length}</Badge>
                     )}
-                  </>
+                  </div>
                 </TooltipTrigger>
                 <TooltipContent>
                   Base styles for all screen sizes
@@ -131,12 +131,12 @@ export const BreakpointClassNameControl = ({
             <TabsTrigger value="md" data-testid="md-tab-trigger">
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <>
+                  <div className="flex items-center">
                   <span className="overflow-hidden text-ellipsis whitespace-nowrap text-nowrap">Tablet & Desktop</span>
                   {md && (
                     <Badge className="ml-1 justify-center text-center px-[3px] h-[18px] min-w-[18px] !text-[10px]">{md.split(" ").filter(Boolean).length}</Badge>
                   )}
-                  </>
+                  </div>
                 </TooltipTrigger>
                 <TooltipContent>
                   Overrides for screens larger than 768px (md:*)

components/ui/ui-builder/internal/nav.tsx

@@ -460,18 +460,18 @@ function ModeToggle() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger>
-        <Tooltip>
+      <Tooltip>
+        <DropdownMenuTrigger asChild>
           <TooltipTrigger asChild>
             <Button variant="outline" size="icon">
               <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
               <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
               <span className="sr-only">Toggle theme</span>
             </Button>
           </TooltipTrigger>
-          <TooltipContent>Toggle theme</TooltipContent>
-        </Tooltip>
-      </DropdownMenuTrigger>
+        </DropdownMenuTrigger>
+        <TooltipContent>Toggle theme</TooltipContent>
+      </Tooltip>
       <DropdownMenuContent align="end" style={{ zIndex: Z_INDEX + 1 }}>
         <DropdownMenuItem onClick={() => setTheme("light")}>
           Light
@@ -542,8 +542,8 @@ function PagesPopover() {
   return (
     <div className="relative flex justify-center">
       <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger>
-          <Tooltip>
+        <Tooltip>
+          <PopoverTrigger asChild>
             <TooltipTrigger asChild>
               <Button
                 variant="outline"
@@ -553,9 +553,9 @@ function PagesPopover() {
                 {selectedPageData?.name}
               </Button>
             </TooltipTrigger>
-            <TooltipContent>Select page</TooltipContent>
-          </Tooltip>
-        </PopoverTrigger>
+          </PopoverTrigger>
+          <TooltipContent>Select page</TooltipContent>
+        </Tooltip>
         <PopoverContent
           className="w-[300px] p-0"
           style={{ zIndex: Z_INDEX + 1 }}
@@ -629,8 +629,8 @@ const PreviewModeToggle = () => {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger>
-        <Tooltip>
+      <Tooltip>
+        <DropdownMenuTrigger asChild>
           <TooltipTrigger asChild>
             <Button variant="outline" size="icon">
               {
@@ -644,9 +644,9 @@ const PreviewModeToggle = () => {
               <span className="sr-only">Select screen size</span>
             </Button>
           </TooltipTrigger>
-          <TooltipContent>Select screen size</TooltipContent>
-        </Tooltip>
-      </DropdownMenuTrigger>
+        </DropdownMenuTrigger>
+        <TooltipContent>Select screen size</TooltipContent>
+      </Tooltip>
       <DropdownMenuContent align="end" style={{ zIndex: Z_INDEX + 1 }}>
         <DropdownMenuItem
           onSelect={() => handleSelect("mobile")}