From 6442eb12fb5455e664055f401b9d2f780d4deb08 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Fri, 20 Feb 2026 10:43:25 -0800
Subject: [PATCH] more visual adjustments

---
 messages/en-US.json                           |   2 +-
 .../settings/clients/user/[niceId]/layout.tsx |   2 +-
 src/app/[orgId]/settings/general/layout.tsx   |   2 +-
 .../settings/sites/[niceId]/layout.tsx        |   2 +-
 src/components/Layout.tsx                     |   2 +-
 src/components/LayoutHeader.tsx               |   4 +-
 src/components/LayoutMobileMenu.tsx           |   4 +-
 src/components/LayoutSidebar.tsx              |  10 +-
 src/components/OrgSelector.tsx                | 101 +++++++++---------
 src/components/SidebarNav.tsx                 |  10 +-
 10 files changed, 69 insertions(+), 70 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index 92334feb..b7341839 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -2099,7 +2099,7 @@
     "manageMachineClients": "Manage Machine Clients",
     "manageMachineClientsDescription": "Create and manage clients that servers and systems use to privately connect to resources",
     "machineClientsBannerTitle": "Servers & Automated Systems",
-    "machineClientsBannerDescription": "Machine clients are for servers and automated systems that are not associated with a specific user. They authenticate with an ID and secret, and can run with Pangolin CLI, Olm CLI, or Olm as a container.",
+    "machineClientsBannerDescription": "Machine clients are for servers and automated systems that are not associated with a specific user. They authenticate with an ID and secret, and can be deployed as a CLI or a container.",
     "machineClientsBannerPangolinCLI": "Pangolin CLI",
     "machineClientsBannerOlmCLI": "Olm CLI",
     "machineClientsBannerOlmContainer": "Container",
diff --git a/src/app/[orgId]/settings/clients/user/[niceId]/layout.tsx b/src/app/[orgId]/settings/clients/user/[niceId]/layout.tsx
index 7d8059aa..2d9934cb 100644
--- a/src/app/[orgId]/settings/clients/user/[niceId]/layout.tsx
+++ b/src/app/[orgId]/settings/clients/user/[niceId]/layout.tsx
@@ -47,7 +47,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
             />
 
             <ClientProvider client={client}>
-                <div className="space-y-6">
+                <div className="space-y-4">
                     <ClientInfoCard />
                     <HorizontalTabs items={navItems}>{children}</HorizontalTabs>
                 </div>
diff --git a/src/app/[orgId]/settings/general/layout.tsx b/src/app/[orgId]/settings/general/layout.tsx
index b69969f4..736e2037 100644
--- a/src/app/[orgId]/settings/general/layout.tsx
+++ b/src/app/[orgId]/settings/general/layout.tsx
@@ -78,7 +78,7 @@ export default async function GeneralSettingsPage({
                         description={t("orgSettingsDescription")}
                     />
 
-                    <div className="space-y-6">
+                    <div className="space-y-4">
                         <OrgInfoCard />
                         <HorizontalTabs items={navItems}>
                             {children}
diff --git a/src/app/[orgId]/settings/sites/[niceId]/layout.tsx b/src/app/[orgId]/settings/sites/[niceId]/layout.tsx
index 30f9eff8..2554403e 100644
--- a/src/app/[orgId]/settings/sites/[niceId]/layout.tsx
+++ b/src/app/[orgId]/settings/sites/[niceId]/layout.tsx
@@ -56,7 +56,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
             />
 
             <SiteProvider site={site}>
-                <div className="space-y-6">
+                <div className="space-y-4">
                     <SiteInfoCard />
                     <HorizontalTabs items={navItems}>{children}</HorizontalTabs>
                 </div>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index a7704c8f..90c7f093 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -75,7 +75,7 @@ export async function Layout({
                     <div
                         className={cn(
                             "container mx-auto max-w-12xl mb-12",
-                            showHeader && "md:pt-16" // Add top padding only on desktop to account for fixed header
+                            showHeader && "md:pt-20" // Add top padding only on desktop to account for fixed header
                         )}
                     >
                         {children}
diff --git a/src/components/LayoutHeader.tsx b/src/components/LayoutHeader.tsx
index bef01685..0b716e1e 100644
--- a/src/components/LayoutHeader.tsx
+++ b/src/components/LayoutHeader.tsx
@@ -48,8 +48,8 @@ export function LayoutHeader({ showTopBar }: LayoutHeaderProps) {
     }, [theme]);
 
     return (
-        <div className="absolute top-0 left-0 right-0 z-50 hidden md:block">
-            <div className="absolute inset-0 bg-background/83 backdrop-blur-sm" />
+        <div className="absolute top-0 left-0 right-0 z-50 hidden md:block border-b border-border">
+            <div className="absolute inset-0 bg-card" />
             <div className="relative z-10 px-6 py-2">
                 <div className="container mx-auto max-w-12xl">
                     <div className="h-16 flex items-center justify-between">
diff --git a/src/components/LayoutMobileMenu.tsx b/src/components/LayoutMobileMenu.tsx
index 2b5fb320..f24c2f13 100644
--- a/src/components/LayoutMobileMenu.tsx
+++ b/src/components/LayoutMobileMenu.tsx
@@ -73,14 +73,14 @@ export function LayoutMobileMenu({
                                         {t("navbarDescription")}
                                     </SheetDescription>
                                     <div className="flex-1 overflow-y-auto relative">
-                                        <div className="px-3">
+                                        <div className="px-1">
                                             <OrgSelector
                                                 orgId={orgId}
                                                 orgs={orgs}
                                             />
                                         </div>
                                         <div className="w-full border-b border-border" />
-                                        <div className="px-3">
+                                        <div className="px-3 pt-3">
                                             {!isAdminPage &&
                                                 user.serverAdmin && (
                                                     <div className="py-2">
diff --git a/src/components/LayoutSidebar.tsx b/src/components/LayoutSidebar.tsx
index ac75047c..7b5bda60 100644
--- a/src/components/LayoutSidebar.tsx
+++ b/src/components/LayoutSidebar.tsx
@@ -145,7 +145,7 @@ export function LayoutSidebar({
                 )}
             />
             <div className="flex-1 overflow-y-auto relative">
-                <div className="px-2 pt-1">
+                <div className="px-2 pt-3">
                     <SidebarNav
                         sections={navItems}
                         isCollapsed={isSidebarCollapsed}
@@ -167,9 +167,7 @@ export function LayoutSidebar({
                                 : "px-3 py-1.5"
                         )}
                         title={
-                            isSidebarCollapsed
-                                ? t("serverAdmin")
-                                : undefined
+                            isSidebarCollapsed ? t("serverAdmin") : undefined
                         }
                     >
                         <span
@@ -182,7 +180,9 @@ export function LayoutSidebar({
                         </span>
                         {!isSidebarCollapsed && (
                             <>
-                                <span className="flex-1">{t("serverAdmin")}</span>
+                                <span className="flex-1">
+                                    {t("serverAdmin")}
+                                </span>
                                 <ArrowRight className="h-4 w-4 shrink-0 ml-auto opacity-70" />
                             </>
                         )}
diff --git a/src/components/OrgSelector.tsx b/src/components/OrgSelector.tsx
index 25ec3b5c..c0969e7e 100644
--- a/src/components/OrgSelector.tsx
+++ b/src/components/OrgSelector.tsx
@@ -6,8 +6,7 @@ import {
     CommandGroup,
     CommandInput,
     CommandItem,
-    CommandList,
-    CommandSeparator
+    CommandList
 } from "@app/components/ui/command";
 import {
     Popover,
@@ -25,6 +24,7 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
 import { cn } from "@app/lib/cn";
 import { ListUserOrgsResponse } from "@server/routers/org";
 import { Check, ChevronsUpDown, Plus, Building2, Users } from "lucide-react";
+import { Button } from "@app/components/ui/button";
 import { usePathname, useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import { useUserContext } from "@app/hooks/useUserContext";
@@ -93,50 +93,32 @@ export function OrgSelector({
                     )}
                 </div>
             </PopoverTrigger>
-            <PopoverContent className="w-[320px] p-0" align="start">
-                <Command className="rounded-lg">
+            <PopoverContent
+                className="w-[320px] p-0 ml-4 flex flex-col relative overflow-visible"
+                align="start"
+                sideOffset={12}
+            >
+                {/* Peak pointing up to the trigger */}
+                <div
+                    className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-full w-0 h-0 border-[7px] border-transparent border-b-border"
+                    aria-hidden
+                />
+                <div
+                    className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-full w-0 h-0 border-[6px] border-transparent border-b-[var(--color-popover)]"
+                    aria-hidden
+                />
+                <Command className="rounded-lg border-0 flex-1 min-h-0">
                     <CommandInput
                         placeholder={t("searchPlaceholder")}
-                        className="border-0 focus:ring-0"
+                        className="border-0 focus:ring-0 h-9 rounded-b-none"
                     />
-                    <CommandEmpty className="py-6 text-center">
-                        <div className="text-muted-foreground text-sm">
-                            {t("orgNotFound2")}
-                        </div>
-                    </CommandEmpty>
-                    {(!env.flags.disableUserCreateOrg || user.serverAdmin) && (
-                        <>
-                            <CommandGroup
-                                heading={t("create")}
-                                className="py-2"
-                            >
-                                <CommandList>
-                                    <CommandItem
-                                        onSelect={() => {
-                                            setOpen(false);
-                                            router.push("/setup");
-                                        }}
-                                        className="mx-2 rounded-md"
-                                    >
-                                        <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 mr-3">
-                                            <Plus className="h-4 w-4 text-primary" />
-                                        </div>
-                                        <div className="flex flex-col">
-                                            <span className="font-medium">
-                                                {t("setupNewOrg")}
-                                            </span>
-                                            <span className="text-xs text-muted-foreground">
-                                                {t("createNewOrgDescription")}
-                                            </span>
-                                        </div>
-                                    </CommandItem>
-                                </CommandList>
-                            </CommandGroup>
-                            <CommandSeparator className="my-2" />
-                        </>
-                    )}
-                    <CommandGroup heading={t("orgs")} className="py-2">
-                        <CommandList>
+                    <CommandList className="max-h-[280px]">
+                        <CommandEmpty className="py-4 text-center">
+                            <div className="text-muted-foreground text-sm">
+                                {t("orgNotFound2")}
+                            </div>
+                        </CommandEmpty>
+                        <CommandGroup className="p-1" heading={t("orgs")}>
                             {sortedOrgs.map((org) => (
                                 <CommandItem
                                     key={org.orgId}
@@ -148,13 +130,13 @@ export function OrgSelector({
                                         );
                                         router.push(newPath);
                                     }}
-                                    className="mx-2 rounded-md"
+                                    className="mx-1 rounded-md py-1.5 h-auto min-h-0"
                                 >
-                                    <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-muted mr-3">
-                                        <Users className="h-4 w-4 text-muted-foreground" />
+                                    <div className="flex items-center justify-center w-6 h-6 rounded-md bg-muted mr-2.5 flex-shrink-0">
+                                        <Users className="h-3.5 w-3.5 text-muted-foreground" />
                                     </div>
-                                    <div className="flex flex-col flex-1 min-w-0">
-                                        <span className="font-medium truncate">
+                                    <div className="flex flex-col flex-1 min-w-0 gap-0.5">
+                                        <span className="font-medium truncate text-sm">
                                             {org.name}
                                         </span>
                                         <div className="flex items-center gap-2 min-w-0">
@@ -173,7 +155,7 @@ export function OrgSelector({
                                     </div>
                                     <Check
                                         className={cn(
-                                            "h-4 w-4 text-primary",
+                                            "h-4 w-4 text-primary flex-shrink-0",
                                             orgId === org.orgId
                                                 ? "opacity-100"
                                                 : "opacity-0"
@@ -181,9 +163,26 @@ export function OrgSelector({
                                     />
                                 </CommandItem>
                             ))}
-                        </CommandList>
-                    </CommandGroup>
+                        </CommandGroup>
+                    </CommandList>
                 </Command>
+                {(!env.flags.disableUserCreateOrg ||
+                    user.serverAdmin) && (
+                    <div className="p-2 border-t border-border">
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            className="w-full justify-start h-8 font-normal text-muted-foreground hover:text-foreground"
+                            onClick={() => {
+                                setOpen(false);
+                                router.push("/setup");
+                            }}
+                        >
+                            <Plus className="h-3.5 w-3.5 mr-2" />
+                            {t("setupNewOrg")}
+                        </Button>
+                    </div>
+                )}
             </PopoverContent>
         </Popover>
     );
diff --git a/src/components/SidebarNav.tsx b/src/components/SidebarNav.tsx
index 087f510b..c6c526bf 100644
--- a/src/components/SidebarNav.tsx
+++ b/src/components/SidebarNav.tsx
@@ -122,7 +122,7 @@ function CollapsibleNavItem({
                         "px-3 py-1.5",
                         isActive
                             ? "bg-secondary font-medium"
-                            : "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
+                            : "text-foreground/80 hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
                         isDisabled && "cursor-not-allowed opacity-60"
                     )}
                     disabled={isDisabled}
@@ -290,7 +290,7 @@ export function SidebarNav({
                     isCollapsed ? "px-2 py-2 justify-center" : "px-3 py-1.5",
                     isActive
                         ? "bg-secondary font-medium"
-                        : "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
+                        : "text-foreground/80 hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
                     isDisabled && "cursor-not-allowed opacity-60"
                 )}
                 onClick={(e) => {
@@ -361,7 +361,7 @@ export function SidebarNav({
                 className={cn(
                     "flex items-center rounded-md transition-colors",
                     "px-3 py-1.5",
-                    "text-muted-foreground",
+                    "text-foreground/80",
                     isDisabled && "cursor-not-allowed opacity-60"
                 )}
             >
@@ -416,7 +416,7 @@ export function SidebarNav({
                                                 "flex items-center rounded-md transition-colors px-2 py-2 justify-center w-full",
                                                 isActive || isChildActive
                                                     ? "bg-secondary font-medium"
-                                                    : "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
+                                                    : "text-foreground/80 hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
                                                 isDisabled &&
                                                     "cursor-not-allowed opacity-60"
                                             )}
@@ -471,7 +471,7 @@ export function SidebarNav({
                                                         "flex items-center rounded-md transition-colors px-3 py-1.5 text-sm",
                                                         childIsActive
                                                             ? "bg-secondary font-medium"
-                                                            : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground",
+                                                            : "text-foreground/80 hover:bg-secondary/50 hover:text-foreground",
                                                         childIsDisabled &&
                                                             "cursor-not-allowed opacity-60"
                                                     )}