From ae471ce86ace58ab5a3ebfadee29001db83f8d28 Mon Sep 17 00:00:00 2001
From: Guilherme Santos <contato.guisantos07@gmail.com>
Date: Wed, 24 May 2023 20:13:18 -0300
Subject: [PATCH] fix: user full name not wrapping on navbar (#8978)

* fix: user full name not wrapping on navbar

* fix: change height of tab title container in settings page

* feat: truncate user full name instead of wrapping

* feat: truncate every section title on settings sidebar

---------

Co-authored-by: alannnc <alannnc@gmail.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 packages/features/settings/layouts/SettingsLayout.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index 857ac8df87..258cede522 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -190,7 +190,7 @@ const SettingsSidebarContainer = ({
           return tab.name !== "teams" ? (
             <React.Fragment key={tab.href}>
               <div className={`${!tab.children?.length ? "!mb-3" : ""}`}>
-                <div className="[&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis text-default group flex h-9 w-64 flex-row items-center rounded-md px-2 text-sm font-medium leading-none">
+                <div className="[&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis text-default group flex h-9 w-full flex-row items-center rounded-md px-2 text-sm font-medium leading-none">
                   {tab && tab.icon && (
                     <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
                   )}
@@ -201,7 +201,7 @@ const SettingsSidebarContainer = ({
                       alt="User Avatar"
                     />
                   )}
-                  <p className="text-sm font-medium leading-5">{t(tab.name)}</p>
+                  <p className="text-sm font-medium leading-5 truncate">{t(tab.name)}</p>
                 </div>
               </div>
               <div className="my-3 space-y-0.5">
@@ -222,11 +222,11 @@ const SettingsSidebarContainer = ({
             <React.Fragment key={tab.href}>
               <div className={`${!tab.children?.length ? "mb-3" : ""}`}>
                 <Link href={tab.href}>
-                  <div className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-default group flex h-9 w-64 flex-row items-center rounded-md px-2 py-[10px]  text-sm font-medium leading-none">
+                  <div className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-default group flex h-9 w-full flex-row items-center rounded-md px-2 py-[10px]  text-sm font-medium leading-none">
                     {tab && tab.icon && (
                       <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
                     )}
-                    <p className="text-sm font-medium leading-5">{t(tab.name)}</p>
+                    <p className="text-sm font-medium leading-5 truncate">{t(tab.name)}</p>
                   </div>
                 </Link>
                 {teams &&
@@ -248,7 +248,7 @@ const SettingsSidebarContainer = ({
                           }>
                           <CollapsibleTrigger>
                             <div
-                              className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis text-default flex h-9 w-64 flex-row items-center rounded-md px-3 py-[10px]  text-left text-sm font-medium leading-none"
+                              className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis text-default flex h-9 w-full flex-row items-center rounded-md px-3 py-[10px]  text-left text-sm font-medium leading-none"
                               onClick={() =>
                                 setTeamMenuState([
                                   ...teamMenuState,