From 45e6088f69843b6152481b8d149853437d322c07 Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Mon, 17 Nov 2025 22:21:54 +0800
Subject: [PATCH] Make single article pages use a wider main column than
 indexes

---
 components/layout-shell.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/layout-shell.tsx b/components/layout-shell.tsx
index 6aefb74..0646dd9 100644
--- a/components/layout-shell.tsx
+++ b/components/layout-shell.tsx
@@ -1,14 +1,27 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
 import { SiteHeader } from './site-header';
 import { SiteFooter } from './site-footer';
 import { RightSidebar } from './right-sidebar';
 import { BackToTop } from './back-to-top';
 
 export function LayoutShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const isDetailPage =
+    pathname.startsWith('/blog/') || pathname.startsWith('/pages/');
+
+  const gridColsClass = isDetailPage
+    ? 'lg:grid-cols-[minmax(0,3fr)_minmax(0,1.2fr)]'
+    : 'lg:grid-cols-[minmax(0,2.6fr)_minmax(0,1.4fr)]';
+
   return (
     <div className="flex min-h-screen flex-col">
       <SiteHeader />
       <main className="flex-1 px-4 py-6">
-        <div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-[minmax(0,2.6fr)_minmax(0,1.4fr)]">
+        <div
+          className={`mx-auto grid max-w-7xl gap-6 ${gridColsClass}`}
+        >
           <div>{children}</div>
           <RightSidebar />
         </div>