fix: improve cospend mobile layout and fix settlement rounding

- Fix settlement amounts rounding to 2 decimal places in debts API
- Improve dashboard mobile responsiveness with tighter gaps and padding
- Optimize settlement layout to stay horizontal on mobile with smaller profile pictures
- Fix payments page mobile layout with better breakpoints and reduced min-width
- Enhance modal behavior on mobile devices with proper responsive design
- Reduce container max-width from 1400px to 1200px for better mobile fitting

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/routes/api/cospend/debts/+server.ts

@@ -89,10 +89,13 @@ export const GET: RequestHandler = async ({ locals }) => {
     // Separate into who owes you vs who you owe
     const whoOwesMe = debtSummaries.filter(debt => debt.netAmount < 0).map(debt => ({
       ...debt,
-      netAmount: Math.abs(debt.netAmount) // Make positive for display
+      netAmount: Math.round(Math.abs(debt.netAmount) * 100) / 100 // Round to 2 decimal places and make positive for display
     }));
 
-    const whoIOwe = debtSummaries.filter(debt => debt.netAmount > 0);
+    const whoIOwe = debtSummaries.filter(debt => debt.netAmount > 0).map(debt => ({
+      ...debt,
+      netAmount: Math.round(debt.netAmount * 100) / 100 // Round to 2 decimal places
+    }));
 
     return json({
       whoOwesMe,

src/routes/cospend/+layout.svelte

@@ -129,26 +129,53 @@
   }
 
   @media (max-width: 768px) {
+    .layout-container.has-modal .main-content {
+      margin-right: 0;
+    }
+
+    .side-panel {
+      position: fixed;
+      top: 4rem;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: calc(100vh - 4rem);
+      transform: translateY(100%);
+    }
+
+    .layout-container.has-modal .side-panel {
+      transform: translateY(0);
+    }
+  }
+
+  @media (max-width: 480px) {
     .layout-container.has-modal {
       flex-direction: column;
     }
 
     .layout-container.has-modal .main-content {
       flex: none;
-      height: 50vh;
+      height: 40vh;
       overflow-y: auto;
+      margin-right: 0;
     }
 
     .side-panel {
       flex: none;
-      height: 50vh;
+      height: 60vh;
       min-width: unset;
       max-width: unset;
+      width: 100%;
       border-left: none;
       border-top: 1px solid #dee2e6;
       box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
       top: auto;
       bottom: 0;
+      transform: translateY(100%);
+    }
+
+    .layout-container.has-modal .side-panel {
+      transform: translateY(0);
     }
   }
 

src/routes/cospend/+page.svelte

@@ -674,12 +674,18 @@
 
   @media (max-width: 600px) {
     .cospend-main {
-      padding: 1rem;
+      padding: 0.75rem;
+    }
+
+    .dashboard-layout {
+      gap: 0.75rem;
+      margin-bottom: 1rem;
     }
 
     .actions {
       flex-direction: column;
       align-items: center;
+      margin-bottom: 1rem;
     }
 
     .btn {
@@ -688,52 +694,87 @@
       text-align: center;
     }
 
-    /* Mobile Settlement Flow */
+    /* Mobile Settlement Flow - Keep Horizontal */
+    .settlement-flow-activity {
+      padding: 0.75rem;
+      margin: 0 auto 0.75rem auto;
+      max-width: none;
+    }
+
     .settlement-user-flow {
-      flex-direction: column;
+      gap: 0.75rem;
-      gap: 1rem;
+      justify-content: space-between;
     }
 
     .settlement-payer, .settlement-receiver {
-      order: 1;
+      gap: 0.5rem;
+      flex: 0 0 auto;
+      min-width: 0;
+    }
+
+    .settlement-payer :global(.profile-picture),
+    .settlement-receiver :global(.profile-picture) {
+      width: 40px !important;
+      height: 40px !important;
+    }
+
+    .settlement-username {
+      font-size: 0.8rem;
+      line-height: 1.1;
+      max-width: 60px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .settlement-arrow-section {
-      order: 2;
+      gap: 0.25rem;
-    }
+      flex: 1;
-
+      min-width: 0;
-    .settlement-flow-arrow {
-      transform: rotate(90deg);
-      font-size: 1.5rem;
     }
 
     .settlement-amount-large {
-      font-size: 1.3rem;
+      font-size: 1.1rem;
+    }
+
+    .settlement-flow-arrow {
+      font-size: 1.2rem;
+    }
+
+    .settlement-date {
+      font-size: 0.75rem;
     }
   }
 
   .dashboard-layout {
     display: flex;
     flex-direction: column;
-    gap: 2rem;
+    gap: 1rem;
-    margin-bottom: 2rem;
+    margin-bottom: 1.5rem;
-    max-width: 1400px;
     margin-left: auto;
     margin-right: auto;
   }
 
+  @media (min-width: 768px) {
+    .dashboard-layout {
+      gap: 1.5rem;
+      margin-bottom: 2rem;
+    }
+  }
+
   @media (min-width: 1200px) {
     .dashboard-layout {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 3rem;
+      gap: 2rem;
       align-items: start;
+      max-width: 1200px;
     }
 
     .balance-section {
       display: flex;
       flex-direction: column;
-      gap: 2rem;
+      gap: 1.5rem;
     }
   }
 

src/routes/cospend/payments/+page.svelte

@@ -264,12 +264,12 @@
   .payments-list {
     max-width: 1200px;
     margin: 0 auto;
-    padding: 2rem;
+    padding: 1rem;
   }
 
 
    h1 {
-    margin-block: 0 2rem;
+    margin-block: 0 1rem;
     margin-inline: auto;
     color: var(--nord0);
     text-align: center;
@@ -380,9 +380,9 @@
 
   .payments-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 1.5rem;
+    gap: 1rem;
-    margin-bottom: 2rem;
+    margin-bottom: 1.5rem;
   }
 
   .payment-card {
@@ -684,24 +684,70 @@
     display: inline-block;
   }
 
-  @media (max-width: 600px) {
+  @media (max-width: 768px) {
     .payments-list {
-      padding: 1rem;
+      padding: 0.75rem;
-    }
+      max-width: none;
-
-    .header {
-      flex-direction: column;
-      gap: 1rem;
-    }
-
-    .header-actions {
-      flex-direction: column;
-      width: 100%;
     }
 
     .payments-grid {
       grid-template-columns: 1fr;
+      gap: 0.75rem;
+      margin-bottom: 1rem;
     }
 
+    .payment-card {
+      padding: 1rem;
+    }
+
+    .payment-header {
+      margin-bottom: 0.75rem;
+    }
+
+    .payment-meta {
+      gap: 0.5rem;
+      font-size: 0.85rem;
+    }
+
+    .title-with-category .category-emoji {
+      font-size: 1.1rem;
+    }
+
+    .payment-title h3 {
+      font-size: 1.1rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .payments-list {
+      padding: 0.5rem;
+    }
+
+    .payments-grid {
+      gap: 0.5rem;
+    }
+
+    .payment-card {
+      padding: 0.75rem;
+    }
+
+    /* Make settlement flow more compact on very small screens */
+    .settlement-flow {
+      gap: 0.5rem;
+    }
+
+    .settlement-user-from, .settlement-user-to {
+      gap: 0.25rem;
+    }
+
+    .settlement-user-from .username,
+    .settlement-user-to .username {
+      font-size: 0.8rem;
+    }
+
+    .settlement-badge-small {
+      font-size: 0.55rem;
+      padding: 0.1rem 0.25rem;
+    }
   }
 </style>