From 68a9df5ab366c826a3630cc5dd79156106babe4c Mon Sep 17 00:00:00 2001
From: LyAhn <admin@jezz.wtf>
Date: Mon, 29 Jun 2026 20:35:13 +0100
Subject: [PATCH] feat(lightbox): two-column metadata layout

Lay the lightbox info-panel metadata out in a two-column grid: paired fields
(Dimensions/Duration, Video codec/Audio codec, Type/File size) sit side by side
while Rating, Modified, and Embedding span the full width. More compact panel
with less scrolling. Tags and EXIF sections are unchanged.
---
 CHANGELOG.md                |  3 +++
 src/components/Lightbox.tsx | 10 ++++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6cc4c7a..b482a80 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -63,6 +63,9 @@ aims to follow [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
 ### Changed
 
+- **Two-column lightbox details** — the image info panel now lays metadata out in
+  two columns (Dimensions/Duration, Video codec/Audio codec, Type/File size sit
+  side by side), so the panel is more compact and less scrolling.
 - **Faster Explore on large libraries** — revisiting a folder's visual clusters
   is now near-instant. The cluster cache is validated from a lightweight
   image-ID signature instead of re-reading every embedding, so big libraries no
diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx
index 7508055..6bff094 100644
--- a/src/components/Lightbox.tsx
+++ b/src/components/Lightbox.tsx
@@ -611,7 +611,8 @@ export function Lightbox() {
                 )}
 
                 <div className="min-h-0 flex-1 overflow-y-auto px-5 pb-4 space-y-4 text-sm">
-                  <div>
+                  <div className="grid grid-cols-2 gap-x-6 gap-y-4">
+                  <div className="col-span-2">
                     <p className="mb-1 text-xs uppercase tracking-wider text-gray-500">Rating</p>
                     <div className="flex items-center gap-1">
                       {Array.from({ length: 5 }, (_, index) => {
@@ -674,7 +675,7 @@ export function Lightbox() {
                       </div>
 
                       {selectedImage.metadata_error ? (
-                        <div>
+                        <div className="col-span-2">
                           <p className="mb-1 text-xs uppercase tracking-wider text-gray-500">Metadata</p>
                           <p className="text-amber-300">{selectedImage.metadata_error}</p>
                         </div>
@@ -692,18 +693,19 @@ export function Lightbox() {
                     <p className="text-white">{formatBytes(selectedImage.file_size)}</p>
                   </div>
 
-                  <div>
+                  <div className="col-span-2">
                     <p className="mb-1 text-xs uppercase tracking-wider text-gray-500">Modified</p>
                     <p className="text-white">{formatDate(selectedImage.modified_at)}</p>
                   </div>
 
-                  <div>
+                  <div className="col-span-2">
                     <p className="mb-1 text-xs uppercase tracking-wider text-gray-500">Embedding</p>
                     <p className="text-white">{embeddingLabel(selectedImage.embedding_status, selectedImage.embedding_model)}</p>
                     {selectedImage.embedding_error ? (
                       <p className="mt-1 text-xs text-amber-300">{selectedImage.embedding_error}</p>
                     ) : null}
                   </div>
+                  </div>
 
                   <div>
                     <div className="mb-2 flex items-center justify-between">