feat: truncate long organization names

jaaydenh · jaaydenh · commit a6d1e5e6d541 · 2025-01-03T15:50:45.000Z
diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx
@@ -97,15 +97,17 @@ const OrganizationsSettingsNavigation: FC<
 						aria-expanded={isPopoverOpen}
 						className="w-60 justify-between p-2 h-11"
 					>
-						<div className="flex flex-row gap-2 items-center p-2">
+						<div className="flex flex-row gap-2 items-center p-2 truncate">
 							{activeOrganization && (
 								<Avatar
 									size="sm"
 									src={activeOrganization.icon}
 									fallback={activeOrganization.display_name}
 								/>
 							)}
-							{activeOrganization?.display_name || activeOrganization?.name}
+							<span className="truncate">
+								{activeOrganization?.display_name || activeOrganization?.name}
+							</span>
 						</div>
 						<ChevronDown />
 					</Button>
@@ -133,7 +135,9 @@ const OrganizationsSettingsNavigation: FC<
 														src={organization.icon}
 														fallback={organization.display_name}
 													/>
-													{organization.display_name || organization.name}
+													<span className="truncate">
+														{organization?.display_name || organization?.name}
+													</span>
 												</CommandItem>
 											</Link>
 										))}
diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx
@@ -100,7 +100,7 @@ export const CreateOrganizationPageView: FC<
 						</Popover>
 					</Badges>
 
-					<header className="flex flex-col gap-2 items-center">
+					<header className="flex flex-col items-center">
 						<h1 className="text-3xl font-semibold m-0">New Organization</h1>
 						<p className="max-w-md text-sm text-content-secondary text-center">
 							Organize your deployment into multiple platform teams with unique
