Fixed sidenav rendering.

src/components/common/LoadingPanel.tsx

@@ -28,9 +28,13 @@ export function LoadingPanel({
   const empty = isEmpty ?? checkEmpty(data);
 
   return (
-    <Column position="relative" flexGrow={1} overflow="hidden" {...props}>
+    <>
       {/* Show loading spinner only if no data exists */}
-      {(isLoading || isFetching) && !data && <Loading icon={loadingIcon} position="page" />}
+      {(isLoading || isFetching) && !data && (
+        <Column position="relative" height="100%" {...props}>
+          <Loading icon={loadingIcon} position="page" />
+        </Column>
+      )}
 
       {/* Show error */}
       {error && <ErrorMessage />}
@@ -40,7 +44,7 @@ export function LoadingPanel({
 
       {/* Show main content when data exists */}
       {!error && !empty && children}
-    </Column>
+    </>
   );
 }
 

src/components/input/TeamsButton.tsx

@@ -25,6 +25,7 @@ export function TeamsButton({ showText = true }: { showText?: boolean }) {
   const router = useRouter();
   const team = data?.data?.find(({ id }) => id === teamId);
   const selectedKeys = new Set([teamId || user.id]);
+  const label = teamId ? team?.name : user.username;
 
   const handleSelect = (id: Key) => {
     router.push(id === user.id ? '/websites' : `/teams/${id}/websites`);
@@ -37,11 +38,8 @@ export function TeamsButton({ showText = true }: { showText?: boolean }) {
   return (
     <MenuTrigger>
       <Pressable>
-        <Row alignItems="center" justifyContent="space-between" width="100%" gap>
-          <SidebarItem
-            label={teamId ? team?.name : user.username}
-            icon={teamId ? <Users /> : <User />}
-          >
+        <Row width="100%" backgroundColor="2" border borderRadius>
+          <SidebarItem label={label} icon={teamId ? <Users /> : <User />}>
             {showText && (
               <Icon rotate={90} size="sm">
                 <Chevron />