From a69b6cd5b60becc5e3bb8ba6adf4106140aeb79b Mon Sep 17 00:00:00 2001
From: Tino Marques <59707674+tinomarques@users.noreply.github.com>
Date: Wed, 22 Jan 2025 17:45:55 -0500
Subject: [PATCH] Fix: Spacing, truncate, and scroll css in DesktopSidebar
 component (#3134)

---
 web/components/layout/auth/DesktopSidebar.tsx | 106 +++++++-----------
 web/components/layout/orgDropdown.tsx         |  10 +-
 2 files changed, 44 insertions(+), 72 deletions(-)

diff --git a/web/components/layout/auth/DesktopSidebar.tsx b/web/components/layout/auth/DesktopSidebar.tsx
index 2d067190b..9657d2660 100644
--- a/web/components/layout/auth/DesktopSidebar.tsx
+++ b/web/components/layout/auth/DesktopSidebar.tsx
@@ -22,7 +22,6 @@ import EndOnboardingConfirmation from "@/components/templates/onboarding/EndOnbo
 import { Dialog } from "@/components/ui/dialog";
 import { DialogContent } from "@/components/ui/dialog";
 import CreateOrgForm from "@/components/templates/organization/createOrgForm";
-import { useJawnClient } from "@/lib/clients/jawnHook";
 import { useUser } from "@supabase/auth-helpers-react";
 
 export interface NavigationItem {
@@ -188,8 +187,6 @@ const DesktopSidebar = ({
     useState(false);
   const [showCreateOrg, setShowCreateOrg] = useState(false);
 
-  const jawn = useJawnClient();
-
   return (
     <>
       {/* Mobile hamburger menu */}
@@ -241,41 +238,41 @@ const DesktopSidebar = ({
         )}
       >
         <div className="w-full flex flex-col h-full border-r dark:border-slate-800">
-          <div className="flex-grow overflow-y-auto pb-14">
-            {/* Collapsible button and OrgDropdown */}
-            <div className="flex items-center gap-2 h-14 border-b dark:border-slate-800">
-              {!isCollapsed && <OrgDropdown />}
-              <div
-                className={cn(
-                  "flex justify-center items-center",
-                  isCollapsed ? "w-full m-4" : "mr-2"
-                )}
-              >
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={handleCollapseToggle}
-                  className="w-full flex justify-center dark:hover:bg-slate-800 px-2"
-                >
-                  {isCollapsed ? (
-                    <ChevronRightIcon className="h-4 w-4" />
-                  ) : (
-                    <ChevronLeftIcon className="h-4 w-4" />
-                  )}
-                </Button>
-              </div>
-            </div>
+          {/* Collapse button and OrgDropdown */}
+          <div
+            className={`flex flex-row items-center border-b dark:border-slate-800 p-2.5 
+              ${isCollapsed ? "justify-center" : "justify-between"}`}
+          >
+            {/* - OrgDropdown */}
+            {!isCollapsed && <OrgDropdown />}
+
+            {/* - Collapse button */}
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleCollapseToggle}
+              className="flex justify-center items-center dark:hover:bg-slate-800 shrink-0"
+            >
+              {isCollapsed ? (
+                <ChevronRightIcon className="h-4 w-4" />
+              ) : (
+                <ChevronLeftIcon className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
 
-            <div className="flex flex-col justify-between h-[calc(100%-16px)]">
+          {/* Main content area */}
+          <div className="flex-1 min-h-0 flex flex-col">
+            <div className="flex-1 overflow-y-auto">
               {/* Navigation items */}
-              <div className="flex flex-col justify-between">
+              <div className="flex flex-col">
                 {((!isCollapsed &&
                   org?.currentOrg?.organization_type === "reseller") ||
                   org?.isResellerOfCurrentCustomerOrg) && (
                   <div className="flex w-full justify-center px-5 py-2">
                     <Button
                       variant="outline"
-                      className="w-full  dark:text-slate-400"
+                      className="w-full dark:text-slate-400"
                       size="sm_sleek"
                       onClick={() => {
                         router.push("/enterprise/portal");
@@ -296,9 +293,9 @@ const DesktopSidebar = ({
                 <div
                   ref={navItemsRef}
                   data-collapsed={isCollapsed}
-                  className="group flex flex-col py-2 data-[collapsed=true]:py-2 "
+                  className="group flex flex-col py-2 data-[collapsed=true]:py-2"
                 >
-                  <nav className="grid flex-grow overflow-y-auto px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
+                  <nav className="grid px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
                     {isOnboardingVisible && <OnboardingNavItems />}
                     {!isOnboardingVisible &&
                       NAVIGATION_ITEMS.map((link) => (
@@ -318,35 +315,12 @@ const DesktopSidebar = ({
                   </nav>
                 </div>
               </div>
-              {/* <Button
-                variant="outline"
-                className="mx-2 text-[13px] font-medium"
-                onClick={() => {
-                  jawn.POST("/v1/organization/setup-demo");
-                }}
-              >
-                Stup date
-              </Button> */}
-              {org?.currentOrg?.tier === "demo" &&
-                org.allOrgs.filter(
-                  (org) => org.tier !== "demo" && org.owner === user?.id
-                ).length === 0 && (
-                  <Button
-                    variant="outline"
-                    className="mx-2 text-[13px] font-medium bg-slate-200 border border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-slate-700 dark:text-slate-400 hover:dark:text-slate-400 hover:dark:bg-slate-700"
-                    onClick={() => {
-                      setShowEndOnboardingConfirmation(true);
-                    }}
-                  >
-                    Ready to integrate
-                  </Button>
-                )}
 
               {/* InfoBox */}
               {canShowInfoBox &&
                 !isCollapsed &&
                 org?.currentOrg?.tier !== "demo" && (
-                  <div className="bg-slate-50 dark:bg-slate-900 rounded border border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-400 flex flex-col md:flex-row md:gap-2 gap-4 justify-between md:justify-center md:items-center items-start px-3 py-2  mt-2 mx-2 mb-8 font-medium">
+                  <div className="bg-slate-50 dark:bg-slate-900 rounded border border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-400 flex flex-col md:flex-row md:gap-2 gap-4 justify-between md:justify-center md:items-center items-start px-3 py-2 mt-2 mx-2 mb-4 font-medium">
                     <h1 className="text-xs text-start tracking-tight leading-[1.35rem]">
                       ⚡ Experiments is here: a new way to perfect your prompt.{" "}
                       <Link
@@ -360,17 +334,17 @@ const DesktopSidebar = ({
                   </div>
                 )}
             </div>
-          </div>
 
-          {/* Sticky help dropdown */}
-          {org?.currentOrg?.tier !== "demo" && (
-            <div className="absolute bottom-3 left-3 z-10">
-              <SidebarHelpDropdown
-                changelog={changelog}
-                handleChangelogClick={handleChangelogClick}
-              />
-            </div>
-          )}
+            {/* Sticky help dropdown */}
+            {org?.currentOrg?.tier !== "demo" && (
+              <div className="p-3">
+                <SidebarHelpDropdown
+                  changelog={changelog}
+                  handleChangelogClick={handleChangelogClick}
+                />
+              </div>
+            )}
+          </div>
         </div>
       </div>
       <ChangelogModal
diff --git a/web/components/layout/orgDropdown.tsx b/web/components/layout/orgDropdown.tsx
index 2d8217ec4..4fd9509e8 100644
--- a/web/components/layout/orgDropdown.tsx
+++ b/web/components/layout/orgDropdown.tsx
@@ -93,22 +93,20 @@ export default function OrgDropdown({}: OrgDropdownProps) {
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
-            className={cn(
-              "flex items-center justify-start w-full ml-1 p-2 truncate"
-            )}
+            className="flex flex-row gap-2 justify-start px-2 py-1 w-full "
           >
             {currentIcon && (
               <currentIcon.icon
                 className={clsx(
                   `text-${currentColor?.name}-500`,
-                  "mr-2 flex-shrink-0 h-4 w-4"
+                  "flex-shrink-0 h-4 w-4"
                 )}
                 aria-hidden="true"
               />
             )}
-            <p className="text-xs font-medium w-fit text-left">
+            <h3 className="text-xs font-medium text-left truncate max-w-24">
               {orgContext?.currentOrg?.name}
-            </p>
+            </h3>
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-[15rem] ml-2 mt-2 max-h-[90vh] flex flex-col border-slate-200">