Polish mobile shopping rows and stabilize backup archives

nouri/static/css/styles.css

@@ -1356,6 +1356,18 @@ h3 {
     white-space: nowrap;
 }
 
+.shopping-entry-check-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.shopping-entry-check-mark {
+    font-size: 1rem;
+    line-height: 1;
+}
+
 .shopping-entry-close-form {
     flex: 0 0 auto;
     margin: 0;
@@ -1415,24 +1427,68 @@ h3 {
 
 @media (max-width: 680px) {
     .shopping-entry-row {
-        align-items: stretch;
-        flex-direction: column;
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto auto;
+        align-items: center;
+        gap: 0.7rem;
     }
 
     .shopping-entry-open {
-        width: 100%;
+        min-width: 0;
+    }
+
+    .shopping-entry-main {
+        grid-template-columns: 56px minmax(0, 1fr);
+        gap: 0.8rem;
+        align-items: center;
+    }
+
+    .shopping-entry-visual,
+    .shopping-entry-fallback {
+        width: 56px;
+        height: 56px;
+        border-radius: 16px;
+    }
+
+    .shopping-entry-copy {
+        gap: 0.12rem;
+    }
+
+    .shopping-entry-copy strong {
+        font-size: 1rem;
+    }
+
+    .shopping-entry-copy .muted {
+        display: none;
     }
 
     .shopping-entry-actions,
     .shopping-entry-actions form,
     .shopping-entry-actions button,
     .shopping-entry-close-form {
-        width: 100%;
+        width: auto;
+    }
+
+    .shopping-entry-check-button {
+        min-width: 0;
+        padding: 0.75rem 0.9rem;
+        border-radius: 16px;
+        gap: 0;
+    }
+
+    .shopping-entry-check-label {
+        display: none;
+    }
+
+    .shopping-entry-check-mark {
+        font-size: 1.05rem;
     }
 
     .shopping-entry-close {
-        width: 100%;
-        border-radius: 18px;
+        width: 2.75rem;
+        height: 2.75rem;
+        min-width: 2.75rem;
+        border-radius: 16px;
     }
 }