diff --git a/src/routes/api/cospend/debts/+server.ts b/src/routes/api/cospend/debts/+server.ts index 6fd03e4..f642475 100644 --- a/src/routes/api/cospend/debts/+server.ts +++ b/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, diff --git a/src/routes/cospend/+layout.svelte b/src/routes/cospend/+layout.svelte index b831d83..4752fdb 100644 --- a/src/routes/cospend/+layout.svelte +++ b/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); } } diff --git a/src/routes/cospend/+page.svelte b/src/routes/cospend/+page.svelte index b6bda08..19fb1f6 100644 --- a/src/routes/cospend/+page.svelte +++ b/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: 1rem; + gap: 0.75rem; + 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; - } - - .settlement-flow-arrow { - transform: rotate(90deg); - font-size: 1.5rem; + gap: 0.25rem; + flex: 1; + min-width: 0; } .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; - margin-bottom: 2rem; - max-width: 1400px; + gap: 1rem; + margin-bottom: 1.5rem; 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; } } diff --git a/src/routes/cospend/payments/+page.svelte b/src/routes/cospend/payments/+page.svelte index f658f1c..ffcaf96 100644 --- a/src/routes/cospend/payments/+page.svelte +++ b/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)); - gap: 1.5rem; - margin-bottom: 2rem; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 1rem; + 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; - } - - .header { - flex-direction: column; - gap: 1rem; - } - - .header-actions { - flex-direction: column; - width: 100%; + padding: 0.75rem; + max-width: none; } .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; + } }