public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/features/settings/layouts/SettingsLayout.tsx
View File

@ -190,7 +190,7 @@ const SettingsSidebarContainer = ({
return tab.name !== "teams" ? ( return tab.name !== "teams" ? (
<React.Fragment key={tab.href}> <React.Fragment key={tab.href}>
<div className={`${!tab.children?.length ? "!mb-3" : ""}`}> <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 && tab.icon && (
<tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" /> <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" 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> </div>
<div className="my-3 space-y-0.5"> <div className="my-3 space-y-0.5">
@ -222,11 +222,11 @@ const SettingsSidebarContainer = ({
<React.Fragment key={tab.href}> <React.Fragment key={tab.href}>
<div className={`${!tab.children?.length ? "mb-3" : ""}`}> <div className={`${!tab.children?.length ? "mb-3" : ""}`}>
<Link href={tab.href}> <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 && tab.icon && (
<tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" /> <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> </div>
</Link> </Link>
{teams && {teams &&
@ -248,7 +248,7 @@ const SettingsSidebarContainer = ({
}> }>
<CollapsibleTrigger> <CollapsibleTrigger>
<div <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={() => onClick={() =>
setTeamMenuState([ setTeamMenuState([
...teamMenuState, ...teamMenuState,