Merge pull request #4109 from Infisical/navbar-org-name-truncation

improvement(frontend): prevent organization name wrap in header
This commit is contained in:
Scott Wilson
2025-07-15 09:26:43 -07:00
committed by GitHub
3 changed files with 4 additions and 4 deletions
@@ -121,7 +121,7 @@ export type TBreadcrumbFormat =
}; };
const BreadcrumbContainer = ({ breadcrumbs }: { breadcrumbs: TBreadcrumbFormat[] }) => ( const BreadcrumbContainer = ({ breadcrumbs }: { breadcrumbs: TBreadcrumbFormat[] }) => (
<div className="mx-auto max-w-7xl py-4 text-white"> <div className="mx-auto max-w-7xl text-white">
<Breadcrumb> <Breadcrumb>
<BreadcrumbList> <BreadcrumbList>
{(breadcrumbs as TBreadcrumbFormat[]).map((el, index) => { {(breadcrumbs as TBreadcrumbFormat[]).map((el, index) => {
@@ -180,7 +180,7 @@ export const Navbar = () => {
} }
return ( return (
<div className="z-10 flex h-12 items-center border-b border-mineshaft-600 bg-mineshaft-800 px-4 py-2"> <div className="z-10 flex min-h-12 items-center border-b border-mineshaft-600 bg-mineshaft-800 px-4">
<div> <div>
<Link to="/organization/projects"> <Link to="/organization/projects">
<img alt="infisical logo" src="/images/logotransparent.png" className="h-4" /> <img alt="infisical logo" src="/images/logotransparent.png" className="h-4" />
@@ -194,7 +194,7 @@ export const Navbar = () => {
<div> <div>
<FontAwesomeIcon icon={faBuilding} className="text-xs text-bunker-300" /> <FontAwesomeIcon icon={faBuilding} className="text-xs text-bunker-300" />
</div> </div>
<div className="max-w-32 overflow-hidden text-ellipsis">{currentOrg?.name}</div> <div className="whitespace-nowrap">{currentOrg?.name}</div>
<div className="mr-1 rounded border border-mineshaft-500 px-1 text-xs text-bunker-300 !no-underline"> <div className="mr-1 rounded border border-mineshaft-500 px-1 text-xs text-bunker-300 !no-underline">
{getPlan(subscription)} {getPlan(subscription)}
</div> </div>
@@ -114,7 +114,7 @@ export const ProjectSelect = () => {
<FontAwesomeIcon icon={faTable} className="text-xs text-bunker-300" /> <FontAwesomeIcon icon={faTable} className="text-xs text-bunker-300" />
</div> </div>
<Tooltip content={currentWorkspace.name} className="max-w-96"> <Tooltip content={currentWorkspace.name} className="max-w-96">
<div className="max-w-32 overflow-hidden text-ellipsis whitespace-nowrap"> <div className="max-w-44 overflow-hidden text-ellipsis whitespace-nowrap">
{currentWorkspace?.name} {currentWorkspace?.name}
</div> </div>
</Tooltip> </Tooltip>