From 7f671a5605a00f70cde3b033844572e37d662e21 Mon Sep 17 00:00:00 2001
From: Rapidement <dorian.grasset.contact@gmail.com>
Date: Fri, 15 Nov 2024 14:00:15 +0100
Subject: [PATCH] fix(GIST-102): update sidebar responsive (#43)

---
 src/app/(gistLayout)/layout-ui.tsx     |  2 +-
 src/app/globals.css                    | 10 ++++++++++
 src/components/ui/org-list.tsx         |  2 +-
 src/components/ui/profile-dropdown.tsx |  2 +-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/(gistLayout)/layout-ui.tsx b/src/app/(gistLayout)/layout-ui.tsx
index 37d1fb2..bba744e 100644
--- a/src/app/(gistLayout)/layout-ui.tsx
+++ b/src/app/(gistLayout)/layout-ui.tsx
@@ -108,7 +108,7 @@ function AppSidebar({
 }: AppSidebarProps) {
   return (
     <Sidebar variant="floating">
-      <div className="w-min flex flex-col gap-8 flex-shrink-0 p-2">
+      <div className="w-min flex flex-col gap-8 flex-shrink-0 p-2 h-full">
         <SidebarHeader>
           <div className="flex flex-row gap-2 justify-between items-center">
             <div className="flex flex-row justify-start items-center gap-2">
diff --git a/src/app/globals.css b/src/app/globals.css
index 604be02..45b8f62 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -138,4 +138,14 @@
     color: #2d1eff;
     background: #f1f5f9;
   }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
 }
diff --git a/src/components/ui/org-list.tsx b/src/components/ui/org-list.tsx
index 72ac4b3..ab7e7ce 100644
--- a/src/components/ui/org-list.tsx
+++ b/src/components/ui/org-list.tsx
@@ -13,7 +13,7 @@ interface OrgListProps {
 
 export function OrgList({ orgs, onGistOrg, onDeleteOrg, onDeleteGist, onUpdateOrg }: OrgListProps) {
   return (
-    <Accordion type="single" collapsible className="w-full">
+    <Accordion type="single" collapsible className="w-full h-full overflow-scroll no-scrollbar">
       {orgs.map((org) => (
         <AccordionItem key={org.name} value={org.name} className="border-none">
           <AccordionTrigger>
diff --git a/src/components/ui/profile-dropdown.tsx b/src/components/ui/profile-dropdown.tsx
index 5834733..877d247 100644
--- a/src/components/ui/profile-dropdown.tsx
+++ b/src/components/ui/profile-dropdown.tsx
@@ -21,7 +21,7 @@ export function ProfileDropdown({ username, onLogout }: ProfileDropdownProps) {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant={"ghost"} className="font-medium truncate max-w-[200px]">
-          <span className="truncate">{username}</span>
+          <span className="max-w-[100px] truncate">{username}</span>
           <ChevronDown className="w-3 h-3 ml-2 flex-shrink-0" />
         </Button>
       </DropdownMenuTrigger>