Organization fixes

components/organization/OrganizationContent.tsx

@@ -6,10 +6,25 @@ import OrganizationCard from './cards/OrganzationCards';
 import Link from 'next/link';
 import { BoundlessButton } from '../buttons';
 import { useOrganization } from '@/lib/providers/OrganizationProvider';
+import LoadingSpinner from '../LoadingSpinner';
 
 export default function OrganizationContent() {
-  const { organizations } = useOrganization();
+  const { organizations, isLoading, isLoadingOrganizations } =
+    useOrganization();
+  const loading = isLoading || isLoadingOrganizations;
   const hasOrganizations = organizations.length > 0;
+
+  if (loading) {
+    return (
+      <main className='flex h-[70vh] items-center justify-center'>
+        <div className='flex flex-col items-center gap-3 text-zinc-400'>
+          <LoadingSpinner size='lg' color='primary' variant='spinner' />
+          <p className='text-sm text-zinc-400'>Loading organizations...</p>
+        </div>
+      </main>
+    );
+  }
+
   return (
     <main className=''>
       {hasOrganizations && (

components/organization/OrganizationHeader.tsx

@@ -26,8 +26,8 @@ export default function OrganizationHeader() {
     pathname !== '/organizations' && pathname.startsWith('/organizations');
 
   return (
-    <header className='sticky top-0 z-50 flex items-center justify-between border-b-1 border-b-zinc-800 bg-black px-10 py-4'>
-      <div className='flex items-center gap-6'>
+    <header className='sticky top-0 z-50 flex w-full flex-wrap items-center justify-between overflow-x-hidden border-b border-b-zinc-800 bg-black px-4 py-3 md:flex-nowrap md:px-10'>
+      <div className='flex min-w-0 flex-1 items-center gap-4 overflow-x-auto md:overflow-visible'>
         <div className='flex items-center gap-2'>
           <Image
             src='/footer/logo.svg'

components/organization/OrganizationSettings.tsx

@@ -55,32 +55,34 @@ export default function OrganizationSettings({
             </button>
             <div className='h-[50px] w-[0.5px] bg-gray-900 md:hidden' />
 
-            <TabsList className='h-auto gap-10 bg-transparent p-0'>
-              <TabsTrigger
-                value='profile'
-                className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
-              >
-                Profile
-              </TabsTrigger>
-              <TabsTrigger
-                value='links'
-                className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
-              >
-                Links
-              </TabsTrigger>
-              <TabsTrigger
-                value='members'
-                className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
-              >
-                Members
-              </TabsTrigger>
-              <TabsTrigger
-                value='transfer'
-                className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
-              >
-                Transfer Ownership
-              </TabsTrigger>
-            </TabsList>
+            <div className='scrollbar-hide overflow-x-auto'>
+              <TabsList className='inline-flex h-auto gap-10 bg-transparent p-0'>
+                <TabsTrigger
+                  value='profile'
+                  className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
+                >
+                  Profile
+                </TabsTrigger>
+                <TabsTrigger
+                  value='links'
+                  className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
+                >
+                  Links
+                </TabsTrigger>
+                <TabsTrigger
+                  value='members'
+                  className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
+                >
+                  Members
+                </TabsTrigger>
+                <TabsTrigger
+                  value='transfer'
+                  className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
+                >
+                  Transfer Ownership
+                </TabsTrigger>
+              </TabsList>
+            </div>
           </div>
         </div>
 

components/organization/ResponsiveSidebar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Trophy, HandCoins, Settings, Plus } from 'lucide-react';
+import { Trophy, HandCoins, Settings, Plus, X } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { cn } from '@/lib/utils';
@@ -45,8 +45,16 @@ export default function ResponsiveSidebar({
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
         side='left'
-        className='w-[350px] border-r border-zinc-800 bg-black p-0'
+        className='w-[350px] border-r border-zinc-800 bg-black p-0 [&_[data-radix-sheet-close-icon]]:text-white'
       >
+        <button
+          onClick={() => onOpenChange?.(false)}
+          className='absolute top-4 right-4 rounded-md p-2 transition hover:bg-zinc-800'
+          aria-label='Close'
+        >
+          <X className='cursor-pointer text-white' />
+        </button>
+
         <nav className='flex h-full flex-col gap-1 py-4'>
           <h3 className='mb-2 px-6 text-xs font-semibold tracking-wider text-zinc-500 uppercase'>
             Menu