From d0a1429a42a4866d5a7c3fb44c734443d0387a19 Mon Sep 17 00:00:00 2001
From: Nikolay Bonev <nbonev@duck.com>
Date: Tue, 10 Dec 2024 12:25:31 +0200
Subject: [PATCH] fixing overflow with too long org name in org selector

---
 app/components/layout/sidebar/organization-selector.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
index 2d5b0e93..e25d9b88 100644
--- a/app/components/layout/sidebar/organization-selector.tsx
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -74,7 +74,7 @@ export default function OrganizationSelector() {
           <DropdownMenuTrigger disabled={isSwitchingOrg} asChild>
             <SidebarMenuButton
               className={tw(
-                "size-full justify-center !p-1 data-[state=open]:bg-gray-50 data-[state=open]:text-sidebar-accent-foreground hover:bg-gray-50",
+                "size-full truncate !p-1 data-[state=open]:bg-gray-50 data-[state=open]:text-sidebar-accent-foreground hover:bg-gray-50",
                 open || openMobile ? "border" : ""
               )}
             >
@@ -91,8 +91,11 @@ export default function OrganizationSelector() {
 
               <When truthy={open || openMobile}>
                 <>
-                  <div className="flex-1 text-left text-sm leading-tight">
-                    <span className="truncate font-semibold">
+                  <div
+                    className="max-w-[calc(100%-36px)] flex-1 text-left text-sm leading-tight"
+                    title={currentOrganization.name}
+                  >
+                    <span className="block max-w-full truncate font-semibold">
                       {currentOrganization.name}
                     </span>
                   </div>