style: improve header menu spacing

acdh-oeaw · Jan 6, 2025 · 0272b58 · 0272b58
1 parent cbbe6fd
commit 0272b58
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/components/app-header-nav-menu.tsx b/components/app-header-nav-menu.tsx
@@ -90,13 +90,17 @@ export function AppHeaderNavMenu(): ReactNode {
 
 	return (
 		<nav aria-label={t("navigation-primary")}>
-			<ul className="flex h-10 items-center gap-4 text-sm" role="list">
+			<ul className="flex items-center gap-6 text-sm" role="list">
 				{Object.entries(topLevelItems).map(([id, item]) => {
 					return <li key={id}>{item}</li>;
 				})}
 			</ul>
 			{worksMenuOpen ? (
-				<ul className="flex h-10 items-center gap-4 text-sm" id={worksMenu} role="list">
+				<ul
+					className="mt-4 flex items-center gap-6 text-center text-sm leading-4"
+					id={worksMenu}
+					role="list"
+				>
 					<li>
 						<DisclosureButton
 							controls={proseMenu}
@@ -122,7 +126,11 @@ export function AppHeaderNavMenu(): ReactNode {
 				</ul>
 			) : null}
 			{worksMenuOpen && proseMenuOpen ? (
-				<ul className="flex h-10 items-center gap-4 text-sm" id={proseMenu} role="list">
+				<ul
+					className="mt-4 flex items-center gap-6 text-center text-sm leading-4"
+					id={proseMenu}
+					role="list"
+				>
 					{proseCategories.map((c) => {
 						return (
 							<AppNavLink key={c} className="lowercase" href={`/works/${c}`}>

diff --git a/components/app-header.tsx b/components/app-header.tsx
@@ -11,7 +11,7 @@ import { LocaleSwitcher } from "./locale-switcher";
 export function AppHeader(): ReactNode {
 	const t = useTranslations("AppHeader");
 	return (
-		<header className="mx-auto grid w-full max-w-screen-xl grid-cols-[auto_1fr_auto] gap-4 border-b p-6">
+		<header className="mx-auto grid w-full max-w-screen-xl auto-cols-auto grid-flow-col gap-4 border-b p-6">
 			<div className="mr-20 mt-2 flex flex-col">
 				<Link className="font-bold lowercase" href={createHref({})}>
 					{t("title")}