UI - Mobile - Small tidyups for mobile use

changedetectionio/static/styles/scss/parts/_watch_table-mobile.scss

@@ -34,11 +34,17 @@ $grid-gap: 0.5rem;
 
 
     .last-checked {
+      margin-left: calc($grid-col-checkbox + $grid-gap);
+
       > span {
         vertical-align: middle;
       }
     }
 
+    .last-changed {
+      margin-left: calc($grid-col-checkbox + $grid-gap);
+    }
+
     .last-checked::before {
       color: var(--color-text);
       content: "Last Checked ";
@@ -167,6 +173,6 @@ $grid-gap: 0.5rem;
     }
   }
   .pure-table td {
-    padding: 5px !important;
+    padding: 3px !important;
   }
 }

changedetectionio/static/styles/scss/styles.scss

@@ -188,9 +188,15 @@ code {
   @extend .inline-tag;
 }
 
+@media (min-width: 768px) {
+  .box {
+    margin: 0 1em !important;
+  }
+}
+
 .box {
   max-width: 100%;
-  margin: 0 1em;
+  margin: 0 0.3em;
   flex-direction: column;
   display: flex;
   justify-content: center;
@@ -1069,17 +1075,22 @@ ul {
 
 
 #quick-watch-processor-type {
-  color: #fff;
-  ul {
-    padding: 0.3rem;
+  ul#processor {
+    color: #fff;
     li {
       list-style: none;
       font-size: 0.9rem;
-      > * {
-        display: inline-block;
-      }
+      display: grid;
+      grid-template-columns: auto 1fr;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.5rem;
     }
   }
+  label, input {
+    padding: 0;
+    margin: 0;
+  }
 }
 
 .restock-label {