From a52ab6e20d28ff89d32025faaceb38f14b28ac3a Mon Sep 17 00:00:00 2001
From: James <james@jongsma.me>
Date: Tue, 10 Feb 2026 04:06:59 -0500
Subject: [PATCH] Document details: two-column layout (category/vendor/amount |
 date/processed/filename)

---
 templates/document.html | 92 ++++++++++++++++++++++-------------------
 1 file changed, 49 insertions(+), 43 deletions(-)

diff --git a/templates/document.html b/templates/document.html
index c3676a3..86549ce 100644
--- a/templates/document.html
+++ b/templates/document.html
@@ -58,49 +58,55 @@
                     <h2 class="font-semibold text-gray-900 dark:text-white">Details</h2>
                 </div>
                 <div class="p-6">
-                    <dl class="grid grid-cols-2 gap-4">
-                        <div>
-                            <dt class="text-sm text-gray-500 dark:text-gray-400">Category</dt>
-                            <dd class="mt-1">
-                                <select onchange="inlineUpdateCategory(this.value)"
-                                        class="font-medium text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-700 rounded-lg px-2 py-1 border-0 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-sm">
-                                    {{range .Categories}}
-                                    <option value="{{.}}" {{if eq . $.Document.Category}}selected{{end}}>{{categoryIcon .}} {{title .}}</option>
-                                    {{end}}
-                                </select>
-                            </dd>
-                        </div>
-                        {{if .Document.Date}}
-                        <div>
-                            <dt class="text-sm text-gray-500 dark:text-gray-400">Date</dt>
-                            <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{formatDate .Document.Date}}</dd>
-                        </div>
-                        {{end}}
-                        {{if .Document.Amount}}
-                        <div>
-                            <dt class="text-sm text-gray-500 dark:text-gray-400">Amount</dt>
-                            <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{.Document.Amount}}</dd>
-                        </div>
-                        {{end}}
-                        {{if .Document.Vendor}}
-                        <div>
-                            <dt class="text-sm text-gray-500 dark:text-gray-400">Vendor</dt>
-                            <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{.Document.Vendor}}</dd>
-                        </div>
-                        {{end}}
-                        {{if .Document.ProcessedAt}}
-                        <div>
-                            <dt class="text-sm text-gray-500 dark:text-gray-400">Processed</dt>
-                            <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{formatDateTime .Document.ProcessedAt}}</dd>
-                        </div>
-                        {{end}}
-                        {{if .Document.OriginalFile}}
-                        <div class="col-span-2">
-                            <dt class="text-sm text-gray-500 dark:text-gray-400">Original File</dt>
-                            <dd class="mt-1 font-medium text-gray-900 dark:text-white truncate">{{.Document.OriginalFile}}</dd>
-                        </div>
-                        {{end}}
-                    </dl>
+                    <div class="grid grid-cols-2 gap-x-8 gap-y-4">
+                        <!-- Left column -->
+                        <dl class="space-y-4">
+                            <div>
+                                <dt class="text-sm text-gray-500 dark:text-gray-400">Category</dt>
+                                <dd class="mt-1">
+                                    <select onchange="inlineUpdateCategory(this.value)"
+                                            class="font-medium text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-700 rounded-lg px-2 py-1 border-0 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-sm">
+                                        {{range .Categories}}
+                                        <option value="{{.}}" {{if eq . $.Document.Category}}selected{{end}}>{{categoryIcon .}} {{title .}}</option>
+                                        {{end}}
+                                    </select>
+                                </dd>
+                            </div>
+                            {{if .Document.Vendor}}
+                            <div>
+                                <dt class="text-sm text-gray-500 dark:text-gray-400">Vendor</dt>
+                                <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{.Document.Vendor}}</dd>
+                            </div>
+                            {{end}}
+                            {{if .Document.Amount}}
+                            <div>
+                                <dt class="text-sm text-gray-500 dark:text-gray-400">Amount</dt>
+                                <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{.Document.Amount}}</dd>
+                            </div>
+                            {{end}}
+                        </dl>
+                        <!-- Right column -->
+                        <dl class="space-y-4">
+                            {{if .Document.Date}}
+                            <div>
+                                <dt class="text-sm text-gray-500 dark:text-gray-400">Date</dt>
+                                <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{formatDate .Document.Date}}</dd>
+                            </div>
+                            {{end}}
+                            {{if .Document.ProcessedAt}}
+                            <div>
+                                <dt class="text-sm text-gray-500 dark:text-gray-400">Processed</dt>
+                                <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{formatDateTime .Document.ProcessedAt}}</dd>
+                            </div>
+                            {{end}}
+                            {{if .Document.OriginalFile}}
+                            <div>
+                                <dt class="text-sm text-gray-500 dark:text-gray-400">Original File</dt>
+                                <dd class="mt-1 font-medium text-gray-900 dark:text-white truncate">{{.Document.OriginalFile}}</dd>
+                            </div>
+                            {{end}}
+                        </dl>
+                    </div>
                 </div>
             </div>