spacing improvements to config layout

src/app/[orgId]/components/Header.tsx

@@ -10,9 +10,9 @@ import {
     DropdownMenuItem,
     DropdownMenuLabel,
     DropdownMenuSeparator,
-    DropdownMenuShortcut,
     DropdownMenuTrigger,
 } from "@app/components/ui/dropdown-menu";
+import { Separator } from "@app/components/ui/separator";
 import Link from "next/link";
 
 type HeaderProps = {
@@ -33,54 +33,72 @@ export default function Header({ email, orgName, name }: HeaderProps) {
     return (
         <>
             <div className="flex items-center justify-between">
-                <Badge variant="outline" className="text-md font-bold">
-                    {orgName}
-                </Badge>
-
                 <div className="flex items-center">
-                    <div className="flex items-center gap-3">
-                        <span className="text-lg font-medium">
-                            {name || email}
-                        </span>
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button
-                                    variant="ghost"
-                                    className="relative h-10 w-10 rounded-full"
-                                >
-                                    <Avatar className="h-10 w-10">
-                                        <AvatarFallback>
-                                            {getInitials()}
-                                        </AvatarFallback>
-                                    </Avatar>
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent
-                                className="w-56"
-                                align="end"
-                                forceMount
+                    <Badge variant="secondary" className="text-md font-bold">
+                        {orgName}
+                    </Badge>
+
+                    <div className="hidden md:block">
+                        <div className="flex items-center gap-4 ml-6">
+                            <Link
+                                href="/docs"
+                                className="text-stone-400 hover:text-stone-600"
                             >
-                                <DropdownMenuLabel className="font-normal">
-                                    <div className="flex flex-col space-y-1">
-                                        {name && (
-                                            <p className="text-sm font-medium leading-none">
-                                                {name}
-                                            </p>
-                                        )}
-                                        <p className="text-xs leading-none text-muted-foreground">
-                                            {email}
-                                        </p>
-                                    </div>
-                                </DropdownMenuLabel>
-                                <DropdownMenuSeparator />
-                                <DropdownMenuGroup>
-                                    <DropdownMenuItem>Profile</DropdownMenuItem>
-                                    <DropdownMenuItem>Log out</DropdownMenuItem>
-                                </DropdownMenuGroup>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
+                                Documentation
+                            </Link>
+                            <Link
+                                href="/support"
+                                className="text-stone-400 hover:text-stone-600"
+                            >
+                                Support
+                            </Link>
+                        </div>
                     </div>
                 </div>
+
+                <div className="flex items-center gap-3">
+                    {/* Make the text truncate on smaller screens */}
+                    <span className="text-lg font-medium truncate max-w-[150px] md:max-w-none">
+                        {name || email}
+                    </span>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button
+                                variant="ghost"
+                                className="relative h-10 w-10 rounded-full"
+                            >
+                                <Avatar className="h-10 w-10">
+                                    <AvatarFallback>
+                                        {getInitials()}
+                                    </AvatarFallback>
+                                </Avatar>
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                            className="w-56"
+                            align="end"
+                            forceMount
+                        >
+                            <DropdownMenuLabel className="font-normal">
+                                <div className="flex flex-col space-y-1">
+                                    {name && (
+                                        <p className="text-sm font-medium leading-none truncate">
+                                            {name}
+                                        </p>
+                                    )}
+                                    <p className="text-xs leading-none text-muted-foreground truncate">
+                                        {email}
+                                    </p>
+                                </div>
+                            </DropdownMenuLabel>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuGroup>
+                                <DropdownMenuItem>Profile</DropdownMenuItem>
+                                <DropdownMenuItem>Log out</DropdownMenuItem>
+                            </DropdownMenuGroup>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </div>
             </div>
         </>
     );

src/app/[orgId]/components/TopbarNav.tsx

@@ -39,7 +39,7 @@ export function TopbarNav({
                     href={item.href.replace("{orgId}", orgId)}
                     className={cn(
                         "px-2 py-3 text-md",
-                        pathname === item.href.replace("{orgId}", orgId)
+                        pathname.startsWith(item.href.replace("{orgId}", orgId))
                             ? "border-b-2 border-stone-600 text-stone-600"
                             : "hover:text-gray-600 text-stone-400",
                         "whitespace-nowrap",

src/app/[orgId]/layout.tsx

@@ -50,8 +50,8 @@ export default async function ConfigurationLaytout({
 
     return (
         <>
-            <div className="w-full bg-stone-200 border-b border-stone-300 mb-5 select-none sm:px-0 px-3">
-                <div className="container mx-auto flex flex-col content-between gap-3 pt-2">
+            <div className="w-full bg-stone-200 border-b border-stone-300 mb-6 select-none sm:px-0 px-3">
+                <div className="container mx-auto flex flex-col content-between gap-4 pt-2">
                     <Header
                         email={user.email}
                         orgName={params.orgId}