form rerenders optimized

app/src/ui/layouts/AppShell/AppShell.tsx

@@ -12,8 +12,8 @@ import {
 import type { IconType } from "react-icons";
 import { twMerge } from "tailwind-merge";
 import { IconButton } from "ui/components/buttons/IconButton";
+import { useEvent } from "ui/hooks/use-event";
 import { AppShellProvider, useAppShell } from "ui/layouts/AppShell/use-appshell";
-import { useEvent } from "../../hooks/use-event";
 
 export function Root({ children }) {
    return (
@@ -74,8 +74,15 @@ export function Content({ children, center }: { children: React.ReactNode; cente
 }
 
 export function Main({ children }) {
+   const { sidebar } = useAppShell();
    return (
-      <div data-shell="main" className="flex flex-col flex-grow w-1 flex-shrink-0">
+      <div
+         data-shell="main"
+         className={twMerge(
+            "flex flex-col flex-grow w-1 flex-shrink-1",
+            sidebar.open && "max-w-[calc(100%-350px)]"
+         )}
+      >
          {children}
       </div>
    );
@@ -298,7 +305,7 @@ export function Scrollable({
 
    return (
       <ScrollArea.Root style={{ height: `calc(100dvh - ${offset}px` }} ref={scrollRef}>
-         <ScrollArea.Viewport className="w-full h-full ">{children}</ScrollArea.Viewport>
+         <ScrollArea.Viewport className="w-full h-full">{children}</ScrollArea.Viewport>
          <ScrollArea.Scrollbar
             forceMount
             className="flex select-none touch-none bg-transparent w-0.5"

app/src/ui/layouts/AppShell/Header.tsx

@@ -73,18 +73,15 @@ export function HeaderNavigation() {
       <>
          <nav className="hidden md:flex flex-row gap-2.5 pl-0 p-2.5 items-center">
             {items.map((item) => (
-               <Tooltip
-                  key={item.label}
-                  label={item.tooltip}
-                  disabled={typeof item.tooltip === "undefined"}
-                  position="bottom"
+               <NavLink
+                  key={item.href}
+                  as={Link}
+                  href={item.href}
+                  Icon={item.Icon}
+                  disabled={item.disabled}
                >
-                  <div>
-                     <NavLink as={Link} href={item.href} Icon={item.Icon} disabled={item.disabled}>
-                        {item.label}
-                     </NavLink>
-                  </div>
-               </Tooltip>
+                  {item.label}
+               </NavLink>
             ))}
          </nav>
          <nav className="flex md:hidden flex-row items-center">