UI - Mobile - Watch overview table - Sort/order buttons were not being shown correctly

changedetectionio/static/styles/scss/styles.scss

@@ -671,14 +671,25 @@ footer {
   and also iPads specifically.
   */
   .watch-table {
+    /* make headings work on mobile */
+    thead {
+      display: block;
+      tr {
+        th {
+          display: inline-block;
+        }
+      }
+      .empty-cell {
+        display: none;
+      }
+    }
 
     /* Force table to not be like tables anymore */
-    thead,
+    tbody {
-    tbody,
+      td,
-    th,
+      tr {
-    td,
+        display: block;
-    tr {
+      }
-      display: block;
     }
 
     .last-checked {
@@ -702,13 +713,6 @@ footer {
       display: inline-block;
     }
 
-    /* Hide table headers (but not display: none;, for accessibility) */
-    thead tr {
-      position: absolute;
-      top: -9999px;
-      left: -9999px;
-    }
-
     .pure-table td,
     .pure-table th {
       border: none;
@@ -753,6 +757,7 @@ footer {
   thead {
     background-color: var(--color-background-table-thead);
     color: var(--color-text);
+    border-bottom: 1px solid var(--color-background-table-thead);
   }
 
   td,

changedetectionio/static/styles/styles.css

@@ -863,14 +863,17 @@ footer {
   and also iPads specifically.
   */
   .watch-table {
+    /* make headings work on mobile */
     /* Force table to not be like tables anymore */
-    /* Force table to not be like tables anymore */
+    /* Force table to not be like tables anymore */ }
-    /* Hide table headers (but not display: none;, for accessibility) */ }
+    .watch-table thead {
-    .watch-table thead,
+      display: block; }
-    .watch-table tbody,
+      .watch-table thead tr th {
-    .watch-table th,
+        display: inline-block; }
-    .watch-table td,
+      .watch-table thead .empty-cell {
-    .watch-table tr {
+        display: none; }
+    .watch-table tbody td,
+    .watch-table tbody tr {
       display: block; }
     .watch-table .last-checked > span {
       vertical-align: middle; }
@@ -882,10 +885,6 @@ footer {
       content: "Last Changed "; }
     .watch-table td.inline {
       display: inline-block; }
-    .watch-table thead tr {
-      position: absolute;
-      top: -9999px;
-      left: -9999px; }
     .watch-table .pure-table td,
     .watch-table .pure-table th {
       border: none; }
@@ -912,7 +911,8 @@ footer {
   border-color: var(--color-border-table-cell); }
   .pure-table thead {
     background-color: var(--color-background-table-thead);
-    color: var(--color-text); }
+    color: var(--color-text);
+    border-bottom: 1px solid var(--color-background-table-thead); }
   .pure-table td,
   .pure-table th {
     border-left-color: var(--color-border-table-cell); }