From ae8e42b02b56be57c3e2a43cbd245f0a7665dc2e Mon Sep 17 00:00:00 2001
From: Casey Rodarmor <casey@rodarmor.com>
Date: Sun, 6 Sep 2026 14:36:52 -0700
Subject: [PATCH] Display item details side-by-side instead of stacked

---
 src/templates/item.rs |  4 ++--
 static/item.css       | 21 ++++++++++++++++++++-
 templates/item.html   |  4 ++--
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/templates/item.rs b/src/templates/item.rs
index 258e92fb..b093c2ec 100644
--- a/src/templates/item.rs
+++ b/src/templates/item.rs
@@ -372,8 +372,8 @@ mod tests {
           <footer>
             <hgroup>
               <h1>Track 1</h1>
-              <p>bar</p>
               <p>
+                <span>bar</span>
                 <a href=/package/{fingerprint}>
                   foo
                 </a>
@@ -501,8 +501,8 @@ mod tests {
           <footer>
             <hgroup>
               <h1>Image 1</h1>
-              <p>bar</p>
               <p>
+                <span>bar</span>
                 <a href=/package/{fingerprint}>
                   baz
                 </a>
diff --git a/static/item.css b/static/item.css
index c7683a20..24ae3de7 100644
--- a/static/item.css
+++ b/static/item.css
@@ -28,26 +28,45 @@ footer {
   background-color: var(--surface);
   display: flex;
   gap: var(--space-2);
-  overflow-wrap: anywhere;
   padding: var(--space-2);
 
   hgroup {
+    align-items: baseline;
+    column-gap: var(--space-2);
+    display: flex;
     flex: 1;
+    flex-wrap: wrap;
     min-width: 0;
 
     h1 {
       font-size: 1.25em;
       margin: 0;
+      min-width: 0;
     }
 
     p {
       color: var(--muted);
+      column-gap: var(--space-2);
+      display: flex;
       font-size: 0.875em;
       margin: 0;
+      min-width: 0;
+      white-space: nowrap;
+
+      a, span {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
 
       a {
         color: inherit;
       }
+
+      span + a {
+        border-left: 1px solid var(--border);
+        padding-left: var(--space-2);
+      }
     }
   }
 
diff --git a/templates/item.html b/templates/item.html
index c315888f..66ea5179 100644
--- a/templates/item.html
+++ b/templates/item.html
@@ -21,10 +21,10 @@
 <footer>
   <hgroup>
     <h1>{{ self.item().display_title(self.index) }}</h1>
+    <p>
 %% if let Some(creator) = self.creator() {
-    <p>{{ creator }}</p>
+      <span>{{ creator }}</span>
 %% }
-    <p>
       <a href=/package/{{ self.fingerprint }}>
 %% if let Some(title) = self.title() {
         {{ title }}