From 88a001261a8e917995040b352e9a7aabdb84b26c Mon Sep 17 00:00:00 2001
From: Michael <michael.dombaugh@gmail.com>
Date: Tue, 3 Mar 2026 14:28:06 +0000
Subject: [PATCH] fix: notes preview text wrapping and right margin

Add word-break/overflow-wrap to .detail-body so long text wraps
properly, and add right margin inside the preview card for balanced
spacing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 static/style.css           | 3 +++
 templates/note_detail.html | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/static/style.css b/static/style.css
index fc9a19f..1395034 100644
--- a/static/style.css
+++ b/static/style.css
@@ -736,6 +736,9 @@ a:hover { color: var(--accent-hover); }
 .detail-body {
     line-height: 1.75;
     color: var(--text);
+    overflow-wrap: break-word;
+    word-break: break-word;
+    min-width: 0;
 }
 
 .detail-body p { margin-bottom: 1em; }
diff --git a/templates/note_detail.html b/templates/note_detail.html
index a369fd2..0cf05b6 100644
--- a/templates/note_detail.html
+++ b/templates/note_detail.html
@@ -19,7 +19,7 @@
     </div>
 </div>
 {% if item.body %}
-<div class="card"><div class="detail-body" style="white-space:pre-wrap;font-family:var(--font-body)">{{ item.body }}</div></div>
+<div class="card" style="overflow:hidden"><div class="detail-body" style="white-space:pre-wrap;font-family:var(--font-body);margin-right:20px">{{ item.body }}</div></div>
 {% else %}
 <div class="card"><div class="text-muted" style="padding:20px">No content yet. <a href="/notes/{{ item.id }}/edit">Start writing</a></div></div>
 {% endif %}