update mobile view.

2026-06-23 14:15:20 -07:00
parent 9d7c224ad2
commit 68649223d9
11 changed files with 304 additions and 52 deletions
@@ -24,3 +24,112 @@
  background-color: #fee2e2;
  color: #991b1b;
 }
+
+// Mobile card list
+// NOTE: display/flex layout lives on the element via Tailwind (flex flex-col gap-3)
+// so the responsive `md:hidden` utility wins on desktop. Setting `display: flex`
+// here would override `md:hidden` and leak the card list onto the desktop view.
+
+.chk-empty {
+  padding: 24px 0;
+  text-align: center;
+  color: #6b7280;
+}
+
+.chk-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: #fff;
+  padding: 14px 16px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+
+  &__top {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  &__number {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #374151;
+  }
+
+  &__amount {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #111827;
+  }
+
+  &__payee {
+    margin-top: 4px;
+    font-weight: 600;
+    color: #1f2937;
+  }
+
+  &__meta {
+    margin: 10px 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    div {
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      font-size: 0.85rem;
+    }
+
+    dt {
+      margin: 0;
+      color: #6b7280;
+    }
+
+    dd {
+      margin: 0;
+      color: #374151;
+      text-align: right;
+    }
+  }
+
+  &__footer {
+    margin-top: 12px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  &__actions {
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid #f3f4f6;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    // Comfortable tap targets; let buttons share the row evenly
+    .k-button {
+      flex: 1 1 auto;
+      min-height: 40px;
+      justify-content: center;
+    }
+  }
+}
+
+.chk-pager {
+  margin-top: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+
+  &__info {
+    font-size: 0.85rem;
+    color: #6b7280;
+  }
+
+  .k-button {
+    min-height: 40px;
+  }
+}