Improve mobile expenses UI and add screenshots

- Redesign mobile expense rows to compact two-line layout
- Add long-press to select functionality for bulk actions
- Add visual feedback during long press (highlight + haptic)
- Update README with app screenshots

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: JavaDogWebDesign

README.md

@@ -9,7 +9,7 @@
 
 ## What It Does
 
-A privacy-focused, self-hosted web application for tracking healthcare expenses. Keep your sensitive financial and health data on your own server.
+A privacy-focused, self-hosted webapp for tracking HSA, FSA and DCFSA expenses with receipt support.
 
 **Key Features:**
 - Track HSA, FSA, and DCFSA expenses with combined plan support
@@ -24,11 +24,22 @@ A privacy-focused, self-hosted web application for tracking healthcare expenses.
 
 ## Screenshots
 
-| Dashboard | Expenses |
-|:---------:|:--------:|
-| ![Dashboard](docs/screenshots/dashboard.png) | ![Expenses](docs/screenshots/expenses.png) |
-| **New Expense** | **Settings** |
-| ![New Expense](docs/screenshots/new-expense.png) | ![Settings](docs/screenshots/settings.png) |
+### Dashboard
+![Dashboard Light](docs/screenshots/dashboard-light.png)
+
+![Dashboard Dark](docs/screenshots/dashboard-dark.png)
+
+### Expenses
+![Expenses](docs/screenshots/expense.png)
+
+### New Expense
+![New Expense](docs/screenshots/new-expense.png)
+
+### Settings
+![Settings](docs/screenshots/settings.png)
+
+### Policy Management
+![Policy Management](docs/screenshots/policy-management.png)
 
 ---
 

app/assets/css/pages/expenses.css

@@ -173,9 +173,6 @@ html.dark-mode .expenses-table-container {
     font-weight: 500;
 }
 
-.expenses-table tbody td:first-child {
-    padding-left: 0.75rem;
-}
 
 .expense-row {
     cursor: pointer;
@@ -291,7 +288,7 @@ html.dark-mode .expenses-table-container {
         position: absolute;
         left: 12px;
         top: 50%;
-        transform: translateY(-50%) scale(0);
+        transform: translate(-31%, -51%) scale(0);
         font-size: 14px;
         font-weight: bold;
         color: white;
@@ -306,7 +303,7 @@ html.dark-mode .expenses-table-container {
     }
 
     .mobile-select-all-checkbox:checked + .mobile-select-all-label::after {
-        transform: translateY(-50%) scale(1);
+        transform: translate(-31%, -51%) scale(1);
     }
 
     /* Hover state for select all */
@@ -343,13 +340,17 @@ html.dark-mode .expenses-table-container {
         accent-color: #3b82f6;
     }
 
-    /* Mobile Card Layout for Expenses - Revamped */
+    /* Mobile Compact Row Layout for Expenses */
     .expenses-table-container {
         overflow: visible;
-        background: transparent;
-        box-shadow: none;
-        border: none;
-        border-radius: 0;
+        background: var(--bg-primary);
+        border-radius: 12px;
+        border: 1px solid var(--border-color);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    }
+
+    html.dark-mode .expenses-table-container {
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     }
 
     .expenses-table thead {
@@ -359,32 +360,40 @@ html.dark-mode .expenses-table-container {
     .expenses-table tbody {
         display: flex;
         flex-direction: column;
-        gap: 0.75rem;
     }
 
-    /* Card Structure: 4 rows x 2 columns grid */
+    /* Compact Two-Line Row Structure */
     .expenses-table tbody tr {
         display: grid;
-        grid-template-columns: auto 1fr;
-        grid-template-rows: auto auto auto auto;
-        gap: 0;
+        grid-template-columns: auto 1fr auto;
+        grid-template-rows: auto auto;
+        column-gap: 0.6rem;
+        row-gap: 0.25rem;
         background: var(--bg-primary);
-        border-radius: 12px;
-        border: 1px solid var(--border-color);
-        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-        padding: 0;
-        overflow: hidden;
+        padding: 0.6rem 0.75rem 0.6rem 1rem;
         cursor: pointer;
         position: relative;
-        transition: all 0.2s ease;
+        transition: background-color 0.15s ease;
+        border-bottom: 1px solid var(--border-color);
+        align-items: center;
     }
 
-    html.dark-mode .expenses-table tbody tr {
-        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+    .expenses-table tbody tr:last-child {
+        border-bottom: none;
     }
 
     .expenses-table tbody tr:active {
-        transform: scale(0.98);
+        background-color: rgba(59, 130, 246, 0.08);
+    }
+
+    /* Long press visual feedback */
+    .expenses-table tbody tr.long-press-active {
+        background-color: rgba(59, 130, 246, 0.06);
+        transition: background-color 0.1s ease;
+    }
+
+    .expenses-table tbody tr.long-press-selected {
+        background-color: rgba(59, 130, 246, 0.15);
     }
 
     /* Remove all default td styling and data-labels */
@@ -397,179 +406,151 @@ html.dark-mode .expenses-table-container {
         content: none !important;
     }
 
-    /* Row 1, Col 1: Checkbox */
+    .expenses-table tbody td::after {
+        content: none !important;
+    }
+
+    /* Checkbox cell - spans both rows */
     .expenses-table tbody td:nth-child(1) {
         grid-column: 1;
-        grid-row: 1;
-        padding: 0.85rem 0 0 0.85rem;
+        grid-row: 1 / 3;
         display: flex;
-        align-items: flex-start;
-        align-self: start;
+        align-items: center;
     }
 
-    /* Row 1, Col 2: Date */
+    /* Date cell - row 2, col 2 */
     .expenses-table tbody td:nth-child(2) {
         grid-column: 2;
-        grid-row: 1;
-        padding: 0.85rem 0.85rem 0 0.65rem;
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        font-size: 0.85rem;
+        grid-row: 2;
+        font-size: 0.75rem;
         color: var(--text-secondary);
-        font-weight: 500;
+        font-weight: 400;
+        display: flex;
+        align-items: center;
+        gap: 0.35rem;
     }
 
-    /* Row 2, Full Width: Provider Name */
+    /* Provider cell - row 1, col 2 */
     .expenses-table tbody td:nth-child(3) {
-        grid-column: 1 / -1;
-        grid-row: 2;
-        padding: 0.6rem 0.85rem 0.4rem 0.85rem;
-        font-size: 1.05rem;
-        font-weight: 600;
+        grid-column: 2;
+        grid-row: 1;
+        font-size: 0.9rem;
+        font-weight: 500;
         color: var(--text-primary);
-        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
-    /* Row 3, Col 1: Account Badge */
+    /* Account badge cell - hidden */
     .expenses-table tbody td:nth-child(4) {
-        grid-column: 1;
-        grid-row: 3;
-        padding: 0.6rem 0 0.85rem 0.85rem;
-        display: flex;
-        align-items: flex-start;
-        border-top: 1px solid var(--border-color);
-        padding-top: 0.6rem;
+        display: none;
     }
 
-    /* Row 3, Col 2: Amounts Column (right side) */
+    /* Amount cell - row 1, col 3 */
     .expenses-table tbody td:nth-child(5) {
-        grid-column: 2;
-        grid-row: 3;
-        padding: 0.6rem 0.85rem 0.85rem 0.5rem;
+        grid-column: 3;
+        grid-row: 1;
         display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        gap: 0.35rem;
-        border-top: 1px solid var(--border-color);
-        padding-top: 0.6rem;
-        font-size: 0.85rem;
-        line-height: 1.4;
-    }
-
-    .expenses-table tbody td:nth-child(5)::before {
-        content: 'Paid amount: ' attr(data-paid);
-        font-weight: 500;
-        color: var(--text-secondary);
-        white-space: nowrap;
-    }
-
-    .expenses-table tbody td:nth-child(5)::after {
-        content: 'Reimbursed amount: ' attr(data-reimbursed);
-        font-weight: 500;
-        color: var(--text-secondary);
-        white-space: nowrap;
+        align-items: center;
+        justify-content: flex-end;
+        font-weight: 600;
+        font-size: 0.9rem;
+        color: var(--text-primary);
+        font-variant-numeric: tabular-nums;
     }
 
-    /* Hide the original reimbursed cell */
+    /* Hide reimbursed cell */
     .expenses-table tbody td:nth-child(6) {
         display: none;
     }
 
-    /* Status Badge - Positioned in top-right corner */
+    /* Status cell - row 2, col 3 */
     .expenses-table tbody td:nth-child(7) {
-        position: absolute;
-        top: 0;
-        right: 0;
-        padding: 0.5rem 0.5rem 0 0;
+        grid-column: 3;
+        grid-row: 2;
         display: flex;
+        align-items: center;
+        justify-content: flex-end;
     }
 
-    /* Gmail-style circular selection indicator */
+    /* Checkbox styling */
     .checkbox-cell {
         z-index: 2;
         position: relative;
     }
 
-    /* Hide the default checkbox */
     .checkbox-cell .expense-checkbox {
         position: absolute;
         opacity: 0;
         width: 0;
         height: 0;
     }
 
-    /* Custom circular indicator */
     .checkbox-label {
         position: relative;
         display: flex;
         align-items: center;
         cursor: pointer;
         user-select: none;
+        padding: 0.25rem 0.25rem 0.25rem 0;
     }
 
-    /* Circle background */
     .checkbox-label::before {
         content: '';
         display: inline-block;
-        width: 24px;
-        height: 24px;
+        width: 22px;
+        height: 22px;
         border: 2px solid var(--border-color);
         border-radius: 50%;
         background: transparent;
-        transition: all 0.2s ease;
+        transition: all 0.15s ease;
     }
 
-    /* Checkmark (hidden by default) */
     .checkbox-label::after {
         content: '✓';
         position: absolute;
-        left: 50%;
+        left: 11px;
         top: 50%;
-        transform: translate(-50%, -50%) scale(0);
-        font-size: 14px;
+        transform: translate(-31%, -51%) scale(0);
+        font-size: 12px;
         font-weight: bold;
         color: white;
-        transition: transform 0.2s ease;
+        transition: transform 0.15s ease;
         line-height: 1;
     }
 
-    /* When checkbox is checked */
     .expense-checkbox:checked + .checkbox-label::before {
         background: #3b82f6;
         border-color: #3b82f6;
     }
 
     .expense-checkbox:checked + .checkbox-label::after {
-        transform: translate(-50%, -50%) scale(1);
-    }
-
-    /* Hover state */
-    .checkbox-label:hover::before {
-        border-color: #3b82f6;
-        border-width: 2.5px;
+        transform: translate(-31%, -51%) scale(1);
     }
 
     .checkbox-text {
         display: none !important;
     }
 
-    /* Adjust status badges for mobile overlay */
+    /* Compact status badges */
     .expenses-table tbody .status-badge {
-        font-size: 0.65rem;
-        padding: 0.25rem 0.5rem;
+        font-size: 0.6rem;
+        padding: 0.2rem 0.4rem;
         font-weight: 600;
         border-radius: 4px;
+        white-space: nowrap;
     }
 
-    /* Account badges styling for mobile */
+    /* Hide account badge in rows */
     .expenses-table tbody .account-badge {
-        font-size: 0.75rem;
-        padding: 0.3rem 0.65rem;
-        font-weight: 600;
-        border-radius: 6px;
+        display: none;
+    }
+
+    /* Receipt indicator in compact view - show inline */
+    .expenses-table tbody .receipt-indicator {
+        margin-left: 0.25rem;
     }
-}
 }
 
 /* ===== No Data Messages ===== */