Improve main content width for short pages (#1200)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: amirhhashemi

src/ui/docs-layout.tsx

@@ -44,32 +44,30 @@ export const DocsLayout = (props: DocsLayoutProps) => {
 				<Show when={titles()?.title} fallback={<Title>SolidDocs</Title>}>
 					{(title) => <Title>{`${title()} - ${projectTitle()}`}</Title>}
 				</Show>
-				<div id="rr" class="flex relative justify-center">
-					<article class="w-fit overflow-hidden pb-16 lg:px-5 expressive-code-overrides lg:max-w-none">
-						<Show when={titles()?.parent}>
-							{(t) => (
-								<span class="text-sm font-semibold text-blue-700 dark:text-blue-300 my-1">
-									{t()}
-								</span>
-							)}
-						</Show>
-						<Show when={titles()?.title}>
-							{(t) => (
-								<h1 class="prose-headings:text-[2.8rem] text-slate-900 dark:text-white">
-									{t()}
-								</h1>
-							)}
-						</Show>
-						<span class="xl:hidden text-sm -mt-[15px] block">
-							<EditPageLink />
-						</span>
-						<div class="max-w-2xl w-full">{props.children}</div>
-						<span class="xl:hidden text-sm">
-							<PageIssueLink />
-						</span>
-						<Pagination currentIndex={entryIndex()} collection={collection()} />
-					</article>
-				</div>
+				<article class="mx-auto overflow-hidden pb-16 max-w-2xl w-full expressive-code-overrides">
+					<Show when={titles()?.parent}>
+						{(t) => (
+							<span class="text-sm font-semibold text-blue-700 dark:text-blue-300 my-1">
+								{t()}
+							</span>
+						)}
+					</Show>
+					<Show when={titles()?.title}>
+						{(t) => (
+							<h1 class="prose-headings:text-[2.8rem] text-slate-900 dark:text-white">
+								{t()}
+							</h1>
+						)}
+					</Show>
+					<span class="xl:hidden text-sm -mt-[15px] block">
+						<EditPageLink />
+					</span>
+					<div class="w-full">{props.children}</div>
+					<span class="xl:hidden text-sm">
+						<PageIssueLink />
+					</span>
+					<Pagination currentIndex={entryIndex()} collection={collection()} />
+				</article>
 			</>
 		</Show>
 	);