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>
pull/9108/head
Guilherme Santos 2023-05-24 20:13:18 -03:00 committed by GitHub
parent dc5d5f8119
commit ae471ce86a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 5 deletions

View File

@ -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,