From 7d1f8d8c1022441a778c5c8eeaccc4ee4ce6d604 Mon Sep 17 00:00:00 2001
From: limina1 <liminal@duck.com>
Date: Sun, 26 Oct 2025 19:12:59 -0400
Subject: [PATCH] Improve compose page layout and readability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increase page container width from 1024px to 1536px for modern displays
- Adjust editor/preview split from 50/50 to 60/40 (editor larger)
- Add max-width constraints to content areas (900px editor, 896px preview)
- Center content within panels for optimal reading line length
- Remove duplicate "Document tags:" display in preview

The editor now has more breathing room while maintaining readable
line lengths. Content stays centered and constrained even with long
paragraphs, improving overall UX for writing and reviewing.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/ZettelEditor.svelte | 39 ++++++--------------------
 src/routes/new/compose/+page.svelte    |  4 +--
 2 files changed, 10 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/ZettelEditor.svelte b/src/lib/components/ZettelEditor.svelte
index 00b6add..450fbab 100644
--- a/src/lib/components/ZettelEditor.svelte
+++ b/src/lib/components/ZettelEditor.svelte
@@ -706,6 +706,8 @@
           ".cm-content": {
             padding: "16px",
             minHeight: "100%",
+            maxWidth: "900px",
+            margin: "0 auto",
           },
           ".cm-editor": {
             borderRadius: "0.5rem",
@@ -881,7 +883,7 @@
       (showTutorial && showStructurePreview)
         ? 'lg:w-1/3'
         : showPreview || showTutorial || showStructurePreview
-          ? 'lg:w-1/2'
+          ? 'lg:w-3/5'
           : 'w-full'} flex flex-col"
     >
       <div
@@ -898,7 +900,7 @@
       <div
         class="{showTutorial || showStructurePreview
           ? 'lg:w-1/3'
-          : 'lg:w-1/2'} flex flex-col"
+          : 'lg:w-2/5'} flex flex-col"
       >
         <div
           class="border border-gray-200 dark:border-gray-700 rounded-lg h-full flex flex-col overflow-hidden"
@@ -912,6 +914,7 @@
           </div>
 
           <div class="flex-1 overflow-y-auto p-6 bg-white dark:bg-gray-900">
+            <div class="max-w-4xl mx-auto">
             {#if !content.trim()}
               <div
                 class="text-gray-500 dark:text-gray-400 text-sm text-center py-8"
@@ -966,33 +969,6 @@
                         },
                       })}
                     </div>
-                    <!-- Document-level tags -->
-                    {#if publicationResult.metadata.attributes.tags}
-                      {@const tagsList =
-                        publicationResult.metadata.attributes.tags
-                          .split(",")
-                          .map((t: string) => t.trim())}
-                      {#if tagsList.length > 0}
-                        <div
-                          class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 mt-3"
-                        >
-                          <div class="flex flex-wrap gap-2 items-center">
-                            <span
-                              class="text-xs font-medium text-gray-600 dark:text-gray-400"
-                              >Document tags:</span
-                            >
-                            {#each tagsList as tag}
-                              <div
-                                class="bg-blue-600 text-blue-100 px-2 py-1 rounded-full text-xs font-medium flex items-baseline"
-                              >
-                                <span class="mr-1">#</span>
-                                <span>{tag}</span>
-                              </div>
-                            {/each}
-                          </div>
-                        </div>
-                      {/if}
-                    {/if}
                   </div>
                 {/if}
 
@@ -1158,6 +1134,7 @@
                 {/if}
               </div>
             {/if}
+            </div>
           </div>
         </div>
       </div>
@@ -1168,7 +1145,7 @@
       <div
         class="{showPreview || showStructurePreview
           ? 'lg:w-1/3'
-          : 'lg:w-1/2'} flex flex-col"
+          : 'lg:w-2/5'} flex flex-col"
       >
         <div
           class="border border-gray-200 dark:border-gray-700 rounded-lg h-full flex flex-col overflow-hidden"
@@ -1320,7 +1297,7 @@ Understanding the nature of knowledge...
       <div
         class="{showPreview || showTutorial
           ? 'lg:w-1/3'
-          : 'lg:w-1/2'} flex flex-col"
+          : 'lg:w-2/5'} flex flex-col"
       >
         <div
           class="border border-gray-200 dark:border-gray-700 rounded-lg h-full flex flex-col overflow-hidden"
diff --git a/src/routes/new/compose/+page.svelte b/src/routes/new/compose/+page.svelte
index 58fd531..96a7885 100644
--- a/src/routes/new/compose/+page.svelte
+++ b/src/routes/new/compose/+page.svelte
@@ -219,8 +219,8 @@
   <title>Compose Note - Alexandria</title>
 </svelte:head>
 
-<!-- Main container with max 1024px width and centered -->
-<div class="flex flex-col self-center items-center w-full max-w-[1024px] mx-auto px-2 space-y-4">
+<!-- Main container with max 1536px width and centered -->
+<div class="flex flex-col self-center items-center w-full max-w-[1536px] mx-auto px-2 space-y-4">
     <Heading
       tag="h1" class="h-leather mb-2">
       Compose Notes