From fddbe7d58490c256b8d8a269f9a0e106b503900b Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Sat, 28 Mar 2026 14:07:38 +0100
Subject: [PATCH] added wide mode to desktop editor

---
 frontend/src/layouts/AdminLayout.astro  | 5 +++--
 frontend/src/layouts/Layout.astro       | 7 ++++---
 frontend/src/pages/admin/assets.astro   | 2 +-
 frontend/src/pages/admin/editor.astro   | 4 ++--
 frontend/src/pages/admin/index.astro    | 2 +-
 frontend/src/pages/admin/login.astro    | 2 +-
 frontend/src/pages/admin/settings.astro | 2 +-
 7 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/src/layouts/AdminLayout.astro b/frontend/src/layouts/AdminLayout.astro
index 3ab91b1..d3e3116 100644
--- a/frontend/src/layouts/AdminLayout.astro
+++ b/frontend/src/layouts/AdminLayout.astro
@@ -3,12 +3,13 @@ import Layout from './Layout.astro';
 
 interface Props {
     title: string;
+    wide?: boolean;
 }
 
-const { title } = Astro.props;
+const { title, wide = false } = Astro.props;
 ---
 
-<Layout title={title}>
+<Layout title={title} wide={wide}>
     <div class="glass p-6 md:p-12 mb-12" id="admin-content" style="display: none;">
         <header class="mb-8 md:mb-12 border-b border-white/5 pb-8 md:pb-12 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
             <div>
diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index 0c81e1e..2f9459c 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -4,9 +4,10 @@ import ThemeSwitcher from '../components/react/ThemeSwitcher';
 
 interface Props {
 	title: string;
+	wide?: boolean;
 }
 
-const { title } = Astro.props;
+const { title, wide = false } = Astro.props;
 
 const API_URL = process.env.PUBLIC_API_URL || 'http://backend:3000';
 
@@ -63,12 +64,12 @@ try {
                 <div class="flex gap-3 md:gap-4 items-center text-sm md:text-base w-full md:w-auto justify-center md:justify-end">
                     <a href="/" class="text-subtext0 hover:text-text transition-colors">Home</a>
                     <a href="/admin" class="text-subtext0 hover:text-mauve transition-colors">Admin</a>
-                    <ThemeSwitcher client:load defaultTheme={siteConfig.theme} />
+                    <ThemeSwitcher client:only="react" defaultTheme={siteConfig.theme} />
                 </div>
             </header>
         </nav>
 
-        <main class="max-w-6xl mx-auto px-4 md:px-6 py-4 md:py-8">
+        <main class={`mx-auto px-4 md:px-6 py-4 md:py-8 ${wide ? 'max-w-[95vw]' : 'max-w-6xl'}`}>
 		    <slot />
         </main>
 
diff --git a/frontend/src/pages/admin/assets.astro b/frontend/src/pages/admin/assets.astro
index 8c258c9..6668dd6 100644
--- a/frontend/src/pages/admin/assets.astro
+++ b/frontend/src/pages/admin/assets.astro
@@ -5,5 +5,5 @@ import AssetManager from '../../components/react/admin/AssetManager';
 
 <AdminLayout title="Asset Library">
     <p slot="header-subtitle" class="mt-2 text-sm md:text-base" style="color: var(--text) !important;">Manage your uploaded images and files.</p>
-    <AssetManager client:load mode="manage" />
+    <AssetManager client:only="react" mode="manage" />
 </AdminLayout>
diff --git a/frontend/src/pages/admin/editor.astro b/frontend/src/pages/admin/editor.astro
index da7fbd5..8fbc8aa 100644
--- a/frontend/src/pages/admin/editor.astro
+++ b/frontend/src/pages/admin/editor.astro
@@ -5,7 +5,7 @@ import Editor from '../../components/react/admin/Editor';
 const editSlug = Astro.url.searchParams.get('edit') || undefined;
 ---
 
-<AdminLayout title="Write Post">
+<AdminLayout title="Write Post" wide>
     <p slot="header-subtitle" class="mt-2 text-sm md:text-base" style="color: var(--text) !important;">Create/Edit post.</p>
-    <Editor client:load editSlug={editSlug} />
+    <Editor client:only="react" editSlug={editSlug} />
 </AdminLayout>
diff --git a/frontend/src/pages/admin/index.astro b/frontend/src/pages/admin/index.astro
index 4bb619c..7ebfa8b 100644
--- a/frontend/src/pages/admin/index.astro
+++ b/frontend/src/pages/admin/index.astro
@@ -4,5 +4,5 @@ import Dashboard from '../../components/react/admin/Dashboard';
 ---
 
 <AdminLayout title="Admin Dashboard">
-    <Dashboard client:load />
+    <Dashboard client:only="react" />
 </AdminLayout>
diff --git a/frontend/src/pages/admin/login.astro b/frontend/src/pages/admin/login.astro
index 17011bd..8b8a986 100644
--- a/frontend/src/pages/admin/login.astro
+++ b/frontend/src/pages/admin/login.astro
@@ -4,5 +4,5 @@ import Login from '../../components/react/admin/Login';
 ---
 
 <Layout title="Admin Login">
-    <Login client:load />
+    <Login client:only="react" />
 </Layout>
diff --git a/frontend/src/pages/admin/settings.astro b/frontend/src/pages/admin/settings.astro
index e4df9f2..7d32834 100644
--- a/frontend/src/pages/admin/settings.astro
+++ b/frontend/src/pages/admin/settings.astro
@@ -5,5 +5,5 @@ import Settings from '../../components/react/admin/Settings';
 
 <AdminLayout title="Site Settings">
     <p slot="header-subtitle" class="mt-2 text-sm md:text-base" style="color: var(--text) !important;">Configure how your blog looks and feels globally.</p>
-    <Settings client:load />
+    <Settings client:only="react" />
 </AdminLayout>