fix: Broken table

SinTan1729 · Mar 19, 2024 · 2cab341 · 2cab341
1 parent 2a2ed7e
commit 2cab341
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/resources/static/script.js b/resources/static/script.js
@@ -126,6 +126,7 @@ const A_SHORT_INSECURE = (s, t) => `<a href="${t}/${s}">${s}</a>`;
 
 const deleteButton = (shortUrl) => {
     const td = document.createElement("td");
+    const div = document.createElement("div");
     const btn = document.createElement("button");
 
     btn.innerHTML = "&times;";
@@ -142,7 +143,8 @@ const deleteButton = (shortUrl) => {
     };
     td.setAttribute("name", "deleteBtn");
     td.setAttribute("label", "Delete");
-    td.appendChild(btn);
+    div.appendChild(btn);
+    td.appendChild(div);
     return td;
 };
 

diff --git a/resources/static/styles.css b/resources/static/styles.css
@@ -2,13 +2,13 @@
     font-family: Montserrat;
     font-style: normal;
     src: url('Montserrat.ttf');
-} 
+}
 
 @font-face {
     font-family: Montserrat;
     font-style: italic;
     src: url('Montserrat-Italic.ttf');
-} 
+}
 
 * {
     font-family: Montserrat;
@@ -28,14 +28,18 @@ table tr td div {
     overflow: auto;
 }
 
-td[name="deleteBtn"] {
+td[name="deleteBtn"] div {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-td[name="deleteBtn"] button {
-    border-radius: 50%;
+td[name="deleteBtn"] {
+    text-align: center;
+}
+
+td[name="deleteBtn"] div button {
+    border-radius: 100%;
     aspect-ratio: 1;
     border-style: solid;
     cursor: pointer;
@@ -98,7 +102,7 @@ dialog form {
     .pure-control-group input {
         width: 98%;
     }
-    
+
     table tr {
         border-bottom: 1px solid #999;
     }
@@ -111,7 +115,7 @@ dialog form {
         display: flex;
         justify-content: left !important;
         width: 98vw;
-        padding: .5em .1em;
+        padding: .5em .1em !important;
     }
 
     table td::before {
@@ -122,13 +126,7 @@ dialog form {
         text-align: left;
     }
 
-    td[name="deleteBtn"] button {
-        border-radius: 50%;
-        aspect-ratio: 1;
-    }
-
     .pure-table caption {
         padding-top: 0px;
     }
-}
-
+}