fix: layout improvements

docs/src/routes/reference/default-theme/landing.mdx

@@ -4,7 +4,7 @@ title: Landing
 
 # Landing
 
-The landing page is configured using [Rrontmatter](../frontmatter):
+The landing page is configured using [Frontmatter](../frontmatter):
 
 ```md
 ---

src/default-theme/Layout.module.css

@@ -24,7 +24,7 @@
 }
 
 .sidenav {
-	min-width: 14rem;
+	min-width: 14.5rem;
 	height: calc(100dvh - var(--sb-header-height));
 	position: sticky;
 	top: var(--sb-header-height);

src/default-theme/components/Article.module.css

@@ -1,12 +1,15 @@
 .article {
-	margin: 2rem;
+	padding: 2rem;
 	display: flex;
+	height: 100%;
 }
 
 .content {
 	max-width: min(calc(100dvw - 2.5rem), 52rem);
 	flex: 1;
 	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
 }
 
 .aside {
@@ -44,7 +47,7 @@
 	font-size: 0.9em;
 	margin: 4rem 0 1rem;
 	display: flex;
-	justify-content: space-between;
+	flex-direction: row;
 	white-space: nowrap;
 	flex-wrap: wrap;
 	gap: 0.5rem;
@@ -54,9 +57,8 @@
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 	grid-column-gap: 1rem;
-	margin: 2rem 0;
 	font-size: 0.9em;
-	padding: 2rem 0 0;
+	padding: 1.5rem 0;
 	border-top: 1px solid
 		color-mix(in hsl, var(--sb-decoration-color) 15%, transparent);
 }

src/default-theme/components/Article.tsx

@@ -84,6 +84,14 @@ export default function Article(props: ParentProps) {
 	const customLink = (r?: RelativePageConfig) =>
 		typeof r === "object" ? r.link : undefined;
 
+	const info = () => {
+		const editLink = pageData()?.editLink;
+		const lastUpdated = frontmatter()?.lastUpdated;
+
+		if (editLink === undefined && lastUpdated === undefined) return;
+		return { editLink, lastUpdated };
+	};
+
 	return (
 		<>
 			<WindowEventListener onClick={onClick} />
@@ -99,15 +107,25 @@ export default function Article(props: ParentProps) {
 
 					{props.children}
 
-					<div class={styles.info}>
-						<Show when={frontmatter()?.lastUpdated} fallback={<div />}>
-							<LastUpdated />
-						</Show>
+					<div style={{ flex: 1 }} />
+
+					<Show when={info()}>
+						{(info) => (
+							<div class={styles.info}>
+								<Show when={info()?.lastUpdated}>
+									<LastUpdated />
+								</Show>
 
-						<Show when={pageData()?.editLink && frontmatter()?.editLink}>
-							<Link href={pageData()?.editLink}>Edit this page on GitHub</Link>
-						</Show>
-					</div>
+								<div style={{ flex: 1 }} />
+
+								<Show when={info().editLink}>
+									{(link) => (
+										<Link href={link()}>Edit this page on GitHub</Link>
+									)}
+								</Show>
+							</div>
+						)}
+					</Show>
 
 					<Show when={hasPrev() || hasNext()}>
 						<nav class={styles.related}>

src/default-theme/components/Footer.module.css

@@ -1,5 +1,4 @@
 .footer {
-	margin: 2rem 0;
 	padding: 2rem 0;
 	border-top: 1px solid
 		color-mix(in hsl, var(--sb-decoration-color) 15%, transparent);

src/default-theme/components/LastUpdated.module.css

@@ -1,3 +1,4 @@
 .last-updated {
+	margin-right: auto;
 	color: color-mix(in hsl, var(--sb-text-color) 72.5%, transparent);
 }