style: fix layout on overly wide publication detail pages

acdh-oeaw · Dec 17, 2024 · 318cc6f · 318cc6f
1 parent 20cf8cb
commit 318cc6f
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 13 deletions.
diff --git a/app/[locale]/publications/[id]/page.tsx b/app/[locale]/publications/[id]/page.tsx
@@ -62,7 +62,7 @@ export default async function PublicationPage(props: PublicationPageProps) {
 	});
 
 	return (
-		<MainContent>
+		<MainContent className="mx-auto w-fit max-w-fit p-4">
 			<h1 className="text-3xl font-bold">{pub.title}</h1>
 			<p className="py-3 lowercase italic">
 				{Array.from(
@@ -78,11 +78,11 @@ export default async function PublicationPage(props: PublicationPageProps) {
 					})
 					.join(" / ")}
 			</p>
-			<div className="gap-8 py-8 md:grid md:grid-cols-[1fr_2fr]">
-				<div className="relative mt-4 h-full">
+			<div className="m-auto justify-center gap-8 py-8 md:flex md:flex-row">
+				<div className="relative mt-4 h-full grow basis-1 md:max-w-[30vw]">
 					<PublicationCover className="object-left-top" publication={pub} />
 				</div>
-				<div className="max-w-prose">
+				<div className="max-w-prose grow basis-1">
 					<PublicationDetails>
 						<NameValue name={t("language")}>
 							<LanguageLink language={pub.language} />
@@ -137,7 +137,7 @@ export default async function PublicationPage(props: PublicationPageProps) {
 			{earlier ? (
 				<>
 					<h2 className="pt-10 font-bold">{t("earlier_editions")}</h2>
-					<div className="flex">
+					<div className="flex flex-wrap">
 						{earlier.map(async (pp) => {
 							const p = await pp;
 							return (
@@ -153,7 +153,7 @@ export default async function PublicationPage(props: PublicationPageProps) {
 			{later ? (
 				<>
 					<h2 className="pt-10 font-bold">{t("later_editions")}</h2>
-					<div className="flex">
+					<div className="flex flex-wrap">
 						{later.map(async (pp) => {
 							const p = await pp;
 							return (

diff --git a/components/app-footer.tsx b/components/app-footer.tsx
@@ -13,7 +13,7 @@ export function AppFooter(): ReactNode {
 	} satisfies Record<string, { href: LinkProps["href"]; label: string }>;
 
 	return (
-		<footer className="m-auto w-screen max-w-screen-xl border-t">
+		<footer className="m-auto w-full max-w-screen-xl border-t">
 			<div className="container flex items-center justify-between gap-4 p-6">
 				<nav aria-label={t("navigation-secondary")}>
 					<ul className="flex items-center gap-4 text-sm" role="list">

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-screen 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 grid-cols-[auto_1fr_auto] gap-4 border-b p-6">
 			<div className="mr-20 mt-2 flex flex-col">
 				<Link className="font-bold lowercase" href={createHref({})}>
 					{t("title")}

diff --git a/components/main-content.tsx b/components/main-content.tsx
@@ -11,11 +11,7 @@ export function MainContent(props: MainContentProps): ReactNode {
 	const { children, className } = props;
 
 	return (
-		<main
-			className={className ?? "mx-auto w-screen max-w-screen-xl p-4 pb-0"}
-			id={id}
-			tabIndex={-1}
-		>
+		<main className={className ?? "mx-auto w-full max-w-screen-xl p-4 pb-0"} id={id} tabIndex={-1}>
 			{children}
 		</main>
 	);