style: reduce empty space on dev-env page

- Tighter vertical spacing (space-y-4, smaller header margins)
- Larger device mockup at all breakpoints (up to 700px monitor)
- Wider content area (max-w-5xl) for dev-env page
- Less padding in device hero section

Co-authored-by: Cursor <cursoragent@cursor.com>

app/pages/[slug]/page.tsx

@@ -76,11 +76,11 @@ export default async function StaticPage({ params }: Props) {
     <>
       <JsonLd data={webPageSchema} />
       <ReadingProgress />
-      <PostLayout hasToc={hasToc} contentKey={slug}>
+      <PostLayout hasToc={hasToc} contentKey={slug} wide={slug === 'dev-env'}>
-        <div className="space-y-8">
+        <div className={slug === 'dev-env' ? 'space-y-4' : 'space-y-8'}>
           <SectionDivider>
             <ScrollReveal>
-              <header className="mb-6 space-y-4 text-center">
+              <header className={slug === 'dev-env' ? 'mb-4 space-y-3 text-center' : 'mb-6 space-y-4 text-center'}>
                 {page.published_at && (
                   <p className="type-small text-slate-500 dark:text-slate-500">
                     {new Date(page.published_at).toLocaleDateString(

components/dev-env-device-hero.tsx

@@ -9,7 +9,7 @@ import { SiArchlinux, SiUbuntu, SiLinux } from 'react-icons/si';
 export function DevEnvDeviceHero() {
   return (
     <div
-      className="dev-env-device-hero -mx-4 mb-8 flex justify-center py-8 sm:-mx-12 sm:py-12 lg:-mx-20 group-[.toc-open]:lg:-mx-4"
+      className="dev-env-device-hero -mx-4 mb-6 flex justify-center py-4 sm:-mx-12 sm:py-6 lg:-mx-20 lg:py-8 group-[.toc-open]:lg:-mx-4"
       role="img"
       aria-label="Mac mini、鍵盤與外接螢幕的 3D 裝置展示"
     >

components/post-layout.tsx

@@ -11,7 +11,7 @@ const PostToc = dynamic(() => import('./post-toc').then(mod => ({ default: mod.P
   ssr: false,
 });
 
-export function PostLayout({ children, hasToc = true, contentKey }: { children: React.ReactNode; hasToc?: boolean; contentKey?: string }) {
+export function PostLayout({ children, hasToc = true, contentKey, wide }: { children: React.ReactNode; hasToc?: boolean; contentKey?: string; wide?: boolean }) {
     const [isTocOpen, setIsTocOpen] = useState(false); // Default closed on mobile
     const [isDesktopTocOpen, setIsDesktopTocOpen] = useState(hasToc); // Separate state for desktop
     const [mounted, setMounted] = useState(false);
@@ -116,7 +116,7 @@ export function PostLayout({ children, hasToc = true, contentKey }: { children:
             )}>
                 {/* Main Content Area */}
                 <div className="min-w-0">
-                    <div className={cn("mx-auto transition-all duration-500 ease-snappy", isDesktopTocOpen && hasToc ? "max-w-3xl" : "max-w-4xl")}>
+                    <div className={cn("mx-auto transition-all duration-500 ease-snappy", isDesktopTocOpen && hasToc ? "max-w-3xl" : wide ? "max-w-5xl" : "max-w-4xl")}>
                         {children}
                     </div>
                 </div>

styles/globals.css

@@ -111,10 +111,10 @@
   margin-top: 40px;
 }
 
-/* Large screen: scale up proportionally */
+/* Large screen: scale up proportionally to fill space */
 @media (min-width: 1024px) {
   .dev-env-monitor {
-    width: min(420px, 32vw);
+    width: min(520px, 42vw);
   }
   .dev-env-monitor + .dev-env-desk {
     margin-top: 48px;
@@ -123,7 +123,7 @@
 
 @media (min-width: 1280px) {
   .dev-env-monitor {
-    width: min(480px, 28vw);
+    width: min(600px, 40vw);
   }
   .dev-env-monitor + .dev-env-desk {
     margin-top: 56px;
@@ -132,7 +132,7 @@
 
 @media (min-width: 1536px) {
   .dev-env-monitor {
-    width: min(540px, 26vw);
+    width: min(700px, 42vw);
   }
   .dev-env-monitor + .dev-env-desk {
     margin-top: 64px;
@@ -552,7 +552,7 @@
 
 @media (min-width: 1024px) {
   .dev-env-desk {
-    width: min(460px, 34vw);
+    width: min(560px, 45vw);
     height: 66px;
     padding: 0 16px;
     gap: 16px;
@@ -561,7 +561,7 @@
 
 @media (min-width: 1280px) {
   .dev-env-desk {
-    width: min(520px, 30vw);
+    width: min(640px, 43vw);
     height: 76px;
     padding: 0 20px;
     gap: 20px;
@@ -570,7 +570,7 @@
 
 @media (min-width: 1536px) {
   .dev-env-desk {
-    width: min(600px, 28vw);
+    width: min(760px, 46vw);
     height: 86px;
     padding: 0 24px;
     gap: 24px;