From 031347a2bcb9846881eddb858d1157a71c21c66d Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Thu, 29 Jan 2026 08:40:31 -0500
Subject: Better formatting for long URLs

---
 static/style.css | 21 ++++++++++++++++-----
 views/repo.eta   | 12 ++++++------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/static/style.css b/static/style.css
index 5673aa7..818c244 100644
--- a/static/style.css
+++ b/static/style.css
@@ -137,12 +137,23 @@ footer {
   border: 1px solid var(--border-color);
 }
 
-.description {
-  margin-bottom: .2rem;
-}
+.repo-info {
+  .description {
+    margin-bottom: .2rem;
+  }
+
+  .detail {
+    white-space: nowrap;
+  }
 
-.count + .count {
-  margin-left: 1rem;
+  div.detail {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  span.detail + span.detail {
+    margin-left: 1rem;
+  }
 }
 
 pre.box {
diff --git a/views/repo.eta b/views/repo.eta
index fbca299..a6fcfb3 100644
--- a/views/repo.eta
+++ b/views/repo.eta
@@ -1,24 +1,24 @@
 <% layout("./layout.eta") %>
 
 <% if (it.info) { %>
-  <div class="box">
+  <div class="box repo-info">
     <% if (it.info.description) { %>
       <div class="description"><%= it.info.description %></div>
     <% } %>
     <% if (it.info.website) { %>
-      <div><img src="/static/icons/link.svg" alt="" class="icon"> <a href="<%= it.info.website %>" rel="noopener noreferrer"><%= it.info.website %></a></div>
+      <div class="detail"><img src="/static/icons/link.svg" alt="" class="icon"> <a href="<%= it.info.website %>" rel="noopener noreferrer"><%= it.info.website %></a></div>
     <% } %>
     <% if (it.info.stars) { %>
-      <span class="count"><img src="/static/icons/star.svg" alt="stars" class="icon"> <%= it.info.stars %></span>
+      <span class="detail"><img src="/static/icons/star.svg" alt="stars" class="icon"> <%= it.info.stars %></span>
     <% } %>
     <% if (it.info.watchers) { %>
-      <span class="count"><img src="/static/icons/eye.svg" alt="watchers" class="icon"> <%= it.info.watchers %></span>
+      <span class="detail"><img src="/static/icons/eye.svg" alt="watchers" class="icon"> <%= it.info.watchers %></span>
     <% } %>
     <% if (it.info.forks) { %>
-      <span class="count"><img src="/static/icons/git-fork.svg" alt="forks" class="icon"> <%= it.info.forks %></span>
+      <span class="detail"><img src="/static/icons/git-fork.svg" alt="forks" class="icon"> <%= it.info.forks %></span>
     <% } %>
     <% if (it.info.numReleases) { %>
-      <div><a href="/<%= it.repo.owner %>/<%= it.repo.name %>/releases"><%= it.info.numReleases %> releases</a></div>
+      <div class="detail"><a href="/<%= it.repo.owner %>/<%= it.repo.name %>/releases"><%= it.info.numReleases %> releases</a></div>
     <% } %>
   </div>
 <% } %>
-- 
cgit v1.3.1