From d32a5e1a01f37296a5cca31c48e1d4af7e9da3f7 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 28 Jan 2025 20:47:05 +0000
Subject: [PATCH] fix: fix UI bugs for orgs (#16302)

resolves coder/internal#288
resolves coder/internal#287

Fixes alignment issue on create organizations page when license banner
is visible.

before
<img width="1178" alt="Screenshot 2025-01-27 at 18 36 35"
src="https://github.com/user-attachments/assets/b845f1df-adb3-4876-aba5-8fa9d56eb22b"
/>

after
<img width="961" alt="Screenshot 2025-01-27 at 18 47 06"
src="https://github.com/user-attachments/assets/4a6374f9-9571-453c-9258-9cc4631afb77"
/>
---
 .../src/modules/management/OrganizationSidebarView.tsx | 10 ++++++++--
 .../ManagementSettingsPage/CreateOrganizationPage.tsx  |  2 +-
 .../CreateOrganizationPageView.tsx                     |  4 ++--
 .../OrganizationProvisionersPage.tsx                   |  5 ++++-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx
index d52b740d4a..17a9c097b9 100644
--- a/site/src/modules/management/OrganizationSidebarView.tsx
+++ b/site/src/modules/management/OrganizationSidebarView.tsx
@@ -86,6 +86,12 @@ const OrganizationsSettingsNavigation: FC<
 		return <Loader />;
 	}
 
+	// Sort organizations to put active organization first
+	const sortedOrganizations = [
+		activeOrganization,
+		...organizations.filter((org) => org.id !== activeOrganization.id),
+	];
+
 	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 	const navigate = useNavigate();
 
@@ -117,9 +123,9 @@ const OrganizationsSettingsNavigation: FC<
 					<Command loop>
 						<CommandList>
 							<CommandGroup className="pb-2">
-								{organizations.length > 1 && (
+								{sortedOrganizations.length > 1 && (
 									<div className="flex flex-col max-h-[260px] overflow-y-auto">
-										{organizations.map((organization) => (
+										{sortedOrganizations.map((organization) => (
 											<CommandItem
 												key={organization.id}
 												value={organization.name}
diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx
index f49f9db79e..d685028d98 100644
--- a/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx
+++ b/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx
@@ -18,7 +18,7 @@ const CreateOrganizationPage: FC = () => {
 	const error = createOrganizationMutation.error;
 
 	return (
-		<main className="py-20 sm:py-7">
+		<main className="py-7">
 			<CreateOrganizationPageView
 				error={error}
 				isEntitled={feats.multiple_organizations}
diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx
index 705c0be2eb..cdb70c3158 100644
--- a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx
@@ -64,7 +64,7 @@ export const CreateOrganizationPageView: FC<
 
 	return (
 		<div className="flex flex-row font-medium">
-			<div className="absolute top-40 left-12">
+			<div className="absolute left-12">
 				<Link
 					to="/organizations"
 					className="flex flex-row items-center gap-2 no-underline text-content-secondary hover:text-content-primary"
@@ -73,7 +73,7 @@ export const CreateOrganizationPageView: FC<
 					Go Back
 				</Link>
 			</div>
-			<div className="flex flex-col gap-4 w-full min-w-72 mx-auto">
+			<div className="flex flex-col gap-4 w-full min-w-96 mx-auto">
 				<div className="flex flex-col items-center">
 					{Boolean(error) && !isApiValidationError(error) && (
 						<div css={{ marginBottom: 32 }}>
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx
index 8d97a49e78..5a4965c039 100644
--- a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx
+++ b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx
@@ -29,7 +29,10 @@ const OrganizationProvisionersPage: FC = () => {
 		<>
 			<Helmet>
 				<title>
-					{pageTitle("Members", organization.display_name || organization.name)}
+					{pageTitle(
+						"Provisioners",
+						organization.display_name || organization.name,
+					)}
 				</title>
 			</Helmet>
 			<OrganizationProvisionersPageView