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>

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>