Visual cleanup

static/list.html

@@ -31,7 +31,7 @@ td div {
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 5px;
+    padding: 5px 5px 5px 0;
     overflow: clip;
     text-wrap: nowrap;
 }
@@ -48,6 +48,10 @@ a {
     text-decoration: none;
     color: var(--sl-color-primary-700);
 }
+
+.long, .short {
+    margin-left: 7px;
+}
         </style>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="icon" type="image/png" href="_favicon.png" />
@@ -105,11 +109,11 @@ document.addEventListener('DOMContentLoaded', () => {
                     <tr>
                         <td>
                             <div>
-                                <a href="{{ .URL }}">{{ .Short }}</a>
                                 <sl-copy-button value="{{ .URL }}" style="color: var(--sl-color-neutral-400);"></sl-copy-button>
                                 <a href="./?short={{ .Short }}">
                                     <sl-icon name="pencil" style="color: var(--sl-color-neutral-400);"></sl-icon>
                                 </a>
+                                <a href="{{ .URL }}" class="short">{{ .Short }}</a>
                             </div>
                         </td>
                         <td>
@@ -118,7 +122,7 @@ document.addEventListener('DOMContentLoaded', () => {
                                 <a href="./?long={{ .Long }}">
                                     <sl-icon name="plus-circle" style="color: var(--sl-color-neutral-400);"></sl-icon>
                                 </a>
-                                <a href="{{ .Long }}">{{ .Long }}</a>
+                                <a href="{{ .Long }}" class="long">{{ .Long }}</a>
                             </div>
                         </td>
                     </tr>