From 41d27c20934bb7c09d7cc20ca849880674b5bc13 Mon Sep 17 00:00:00 2001
From: Piyush Gupta <56182734+gupta-piyush19@users.noreply.github.com>
Date: Wed, 6 Aug 2025 13:28:28 +0530
Subject: [PATCH] fix: use full width on sidebar elements (#6357)

---
 .../landing/components/landing-sidebar.tsx        | 12 ++++++------
 .../[environmentId]/components/MainNavigation.tsx | 15 +++++++++------
 .../components/project-switcher/index.tsx         | 10 +++++-----
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar.tsx b/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar.tsx
index f50e589875..4eecda8abd 100644
--- a/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar.tsx
+++ b/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar.tsx
@@ -80,25 +80,25 @@ export const LandingSidebar = ({
           <DropdownMenuTrigger
             asChild
             id="userDropdownTrigger"
-            className="w-full rounded-br-xl border-t py-4 pl-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
-            <div tabIndex={0} className={cn("flex cursor-pointer flex-row items-center space-x-3")}>
+            className="w-full rounded-br-xl border-t p-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
+            <div tabIndex={0} className={cn("flex cursor-pointer flex-row items-center gap-3")}>
               <ProfileAvatar userId={user.id} imageUrl={user.imageUrl} />
               <>
-                <div>
+                <div className="grow overflow-hidden">
                   <p
                     title={user?.email}
                     className={cn(
-                      "ph-no-capture ph-no-capture -mb-0.5 max-w-28 truncate text-sm font-bold text-slate-700"
+                      "ph-no-capture ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700"
                     )}>
                     {user?.name ? <span>{user?.name}</span> : <span>{user?.email}</span>}
                   </p>
                   <p
                     title={capitalizeFirstLetter(organization?.name)}
-                    className="max-w-28 truncate text-sm text-slate-500">
+                    className="truncate text-sm text-slate-500">
                     {capitalizeFirstLetter(organization?.name)}
                   </p>
                 </div>
-                <ChevronRightIcon className={cn("h-5 w-5 text-slate-700 hover:text-slate-500")} />
+                <ChevronRightIcon className={cn("h-5 w-5 shrink-0 text-slate-700 hover:text-slate-500")} />
               </>
             </div>
           </DropdownMenuTrigger>
diff --git a/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx b/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx
index 6cd5a4d44f..003ecf3940 100644
--- a/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx
@@ -339,27 +339,30 @@ export const MainNavigation = ({
                   <div
                     tabIndex={0}
                     className={cn(
-                      "flex cursor-pointer flex-row items-center space-x-3",
-                      isCollapsed ? "pl-2" : "pl-4"
+                      "flex cursor-pointer flex-row items-center gap-3",
+                      isCollapsed ? "justify-center px-2" : "px-4"
                     )}>
                     <ProfileAvatar userId={user.id} imageUrl={user.imageUrl} />
                     {!isCollapsed && !isTextVisible && (
                       <>
-                        <div className={cn(isTextVisible ? "opacity-0" : "opacity-100")}>
+                        <div
+                          className={cn(isTextVisible ? "opacity-0" : "opacity-100", "grow overflow-hidden")}>
                           <p
                             title={user?.email}
                             className={cn(
-                              "ph-no-capture ph-no-capture -mb-0.5 max-w-28 truncate text-sm font-bold text-slate-700"
+                              "ph-no-capture ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700"
                             )}>
                             {user?.name ? <span>{user?.name}</span> : <span>{user?.email}</span>}
                           </p>
                           <p
                             title={capitalizeFirstLetter(organization?.name)}
-                            className="max-w-28 truncate text-sm text-slate-500">
+                            className="truncate text-sm text-slate-500">
                             {capitalizeFirstLetter(organization?.name)}
                           </p>
                         </div>
-                        <ChevronRightIcon className={cn("h-5 w-5 text-slate-700 hover:text-slate-500")} />
+                        <ChevronRightIcon
+                          className={cn("h-5 w-5 shrink-0 text-slate-700 hover:text-slate-500")}
+                        />
                       </>
                     )}
                   </div>
diff --git a/apps/web/modules/projects/components/project-switcher/index.tsx b/apps/web/modules/projects/components/project-switcher/index.tsx
index 4ef6dfa477..729da9ab1d 100644
--- a/apps/web/modules/projects/components/project-switcher/index.tsx
+++ b/apps/web/modules/projects/components/project-switcher/index.tsx
@@ -133,8 +133,8 @@ export const ProjectSwitcher = ({
           <div
             tabIndex={0}
             className={cn(
-              "flex cursor-pointer flex-row items-center space-x-3",
-              isCollapsed ? "pl-2" : "pl-4"
+              "flex cursor-pointer flex-row items-center gap-3",
+              isCollapsed ? "justify-center px-2" : "px-4"
             )}>
             <div className="rounded-lg bg-slate-900 p-1.5 text-slate-50">
               {project.config.channel === "website" ? (
@@ -149,11 +149,11 @@ export const ProjectSwitcher = ({
             </div>
             {!isCollapsed && !isTextVisible && (
               <>
-                <div>
+                <div className="grow overflow-hidden">
                   <p
                     title={project.name}
                     className={cn(
-                      "ph-no-capture ph-no-capture -mb-0.5 max-w-28 truncate text-sm font-bold text-slate-700 transition-opacity duration-200",
+                      "ph-no-capture ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700 transition-opacity duration-200",
                       isTextVisible ? "opacity-0" : "opacity-100"
                     )}>
                     {project.name}
@@ -170,7 +170,7 @@ export const ProjectSwitcher = ({
                 </div>
                 <ChevronRightIcon
                   className={cn(
-                    "h-5 w-5 text-slate-700 transition-opacity duration-200 hover:text-slate-500",
+                    "h-5 w-5 shrink-0 text-slate-700 transition-opacity duration-200 hover:text-slate-500",
                     isTextVisible ? "opacity-0" : "opacity-100"
                   )}
                 />