feat: static width note editor area

web/src/app.css

@@ -336,6 +336,10 @@
 	}
 
 	/* Note editor */
+	.note-title-container {
+		@apply mb-4;
+	}
+
 	.note-title-input {
 		@apply w-full rounded-2xl border-b border-[var(--light-text)]/20 bg-transparent pb-2 text-2xl font-bold focus:border-[var(--light-accent)];
 	}
@@ -352,18 +356,30 @@
 		@apply text-[var(--dark-text)]/60;
 	}
 
+	.note-editor-container {
+		@apply flex min-h-0 flex-1 flex-col overflow-auto;
+	}
+
+	.note-editor-wrapper {
+		@apply flex h-full flex-col;
+	}
+
+	.note-editor-content {
+		@apply flex h-full flex-col;
+	}
+
 	.note-textarea {
 		@apply h-full max-h-full min-h-1/2 w-full resize-none rounded-2xl bg-transparent p-3.5 font-mono outline-none focus:border-4 focus:border-[var(--light-accent)]/60;
 	}
 
-	.note-save-button {
-		@apply absolute right-10 bottom-10;
-	}
-
 	.dark .note-textarea {
 		@apply focus:border-[var(--dark-accent)]/60;
 	}
 
+	.note-save-button {
+		@apply fixed right-10 bottom-10 z-10;
+	}
+
 	/* Markdown preview */
 	.markdown-preview h1 {
 		@apply mt-6 mb-4 border-b border-[var(--light-foreground)] pb-3 text-3xl;
@@ -577,19 +593,34 @@
 
 	/* Main layout */
 	.main-layout-container {
-		@apply flex h-screen bg-[var(--light-background)];
+		@apply flex h-screen w-full bg-[var(--light-background)];
 	}
 
 	.dark .main-layout-container {
 		@apply bg-[var(--dark-background)];
 	}
 
+	.content-wrapper {
+		@apply flex h-screen flex-1 flex-col overflow-hidden;
+	}
+
+	.note-content-fixed-width {
+		@apply mx-auto flex w-full max-w-[800px] flex-col px-8 py-0;
+		height: calc(100% - 5rem);
+	}
+
+	@media (max-width: 768px) {
+		.note-content-fixed-width {
+			@apply max-w-full px-4 py-0;
+		}
+	}
+
 	.main-error-popup {
 		@apply fixed top-4 right-4 z-50 max-w-md;
 	}
 
 	.main-header {
-		@apply flex items-center justify-between bg-[var(--light-foreground)] p-4 shadow-sm;
+		@apply flex h-20 items-center justify-between bg-[var(--light-foreground)] p-4 shadow-sm;
 	}
 
 	.dark .main-header {
@@ -597,7 +628,7 @@
 	}
 
 	.main-content {
-		@apply flex-1 overflow-auto bg-[var(--light-background)] p-6;
+		@apply flex min-h-0 flex-1 flex-col overflow-auto bg-[var(--light-background)] p-6;
 	}
 
 	.dark .main-content {

web/src/lib/client.ts

@@ -781,6 +781,9 @@ class ApiClient {
 
 		// NOTE: No need to explicitly prevent attempting a cache hit as versions aren't editable
 
+		// TODO: If accessing the active version, don't attempt to hit the cache,
+		//       but instead load the contents from the currently active full note
+
 		const cachedVersion = this.loadedVersionsCache.get(noteID + versionID)
 		if (cachedVersion != null) {
 			return cachedVersion

web/src/lib/components/NoteEditor.svelte

@@ -122,9 +122,9 @@
 	}
 </script>
 
-<div class="flex h-full flex-col">
+<div class="note-editor-content">
 	<!-- Note title -->
-	<div class="mb-4">
+	<div class="note-title-container">
 		{#if isEditing}
 			<input
 				type="text"
@@ -158,10 +158,10 @@
 		{/if}
 	</div>
 
-	<!-- Note content -->
+	<!-- Note content (takes up remaining vertical space) -->
-	<div class="flex-1 overflow-auto">
+	<div class="note-editor-container">
 		{#if isEditing}
-			<div class="relative h-full">
+			<div class="note-editor-wrapper">
 				<textarea
 					bind:this={textarea}
 					bind:value={editableContent}

web/src/lib/components/NoteView.svelte

@@ -210,9 +210,9 @@
 			on:close={closeSidebar}
 		/>
 
-		<!-- Main content -->
+		<!-- Main content area -->
 		<div
-			class="flex flex-1 flex-col overflow-hidden transition-all duration-300"
+			class="content-wrapper transition-all duration-300"
 			class:md:-ml-64={!sidebarOpen}
 			class:md:ml-0={sidebarOpen}
 		>
@@ -279,7 +279,8 @@
 				</div>
 			</header>
 
-			<!-- Note content area -->
+			<!-- Note content area with fixed width -->
+			<div class="note-content-fixed-width">
 				<main class="main-content">
 					{#if $currentFullNote}
 						<NoteEditor note={$currentFullNote} bind:isEditing {saveNote} />
@@ -291,6 +292,7 @@
 					{/if}
 				</main>
 			</div>
+		</div>
 
 		<!-- Settings Modal -->
 		{#if showSettings}