From b9914602eb8224c41a15d04a0fd037e3065ab7e7 Mon Sep 17 00:00:00 2001
From: videogame hacker <half-kh-hacker@hackery.site>
Date: Tue, 26 Jul 2022 05:11:20 +0100
Subject: [PATCH] Better table display for redirects

---
 static/css/styles.css | 11 +++++++++++
 static/js/shorten.js  |  6 ++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index fc04b91..3209240 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -65,3 +65,14 @@ form {
 form button {
   margin-top: 0.5em;
 }
+
+table pre .spaced {
+  padding: 0.5em;
+}
+
+table td .clipped {
+  overflow-x: clip;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 30ch;
+}
diff --git a/static/js/shorten.js b/static/js/shorten.js
index b531ec3..2bbd4e2 100644
--- a/static/js/shorten.js
+++ b/static/js/shorten.js
@@ -16,11 +16,13 @@ const populateRedirects = async (redirKey) => {
         h(
           "td",
           {},
-          h("a", { href: "/" + redirect.path }, [h("pre", {}, [redirect.path])])
+          h("a", { href: "/" + redirect.path }, [
+            h("pre", { className: "spaced" }, [redirect.path]),
+          ])
         ),
         h(
           "td",
-          {},
+          { className: "clipped" },
           h("a", { href: redirect.target_location }, [redirect.target_location])
         ),
         h("td", {}, [redirect.redirect_code]),