Better table display for redirects

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;
+}

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]),