fix(GIST-102): update sidebar responsive (#43)

gistsapp · Nov 15, 2024 · 7f671a5 · 7f671a5
1 parent d198c6e
commit 7f671a5
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>