From dea5d8c675026338c57d8974c1fe4bb6da7bf7b5 Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Fri, 16 Oct 2026 04:29:46 +0000
Subject: [PATCH] fix(transactions): single-line rows with a foreign column,
 whole-card period strip under the table

---
 src/lib/components/transactions/Periods.svelte          | 4 ++--
 src/lib/components/transactions/TransactionTable.svelte | 9 ++++++++-
 src/routes/transactions/[type=txtype]/ListPage.svelte   | 2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/transactions/Periods.svelte b/src/lib/components/transactions/Periods.svelte
index f5715d8..9bb5ec1 100644
--- a/src/lib/components/transactions/Periods.svelte
+++ b/src/lib/components/transactions/Periods.svelte
@@ -64,14 +64,14 @@
 
 <nav
   aria-label="Periods"
-  class="flex min-w-0 gap-2 overflow-x-auto min-[1600px]:flex-col min-[1600px]:overflow-visible {className}"
+  class="grid min-w-0 auto-rows-[0] grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] grid-rows-[auto] gap-x-2 overflow-hidden min-[1600px]:flex min-[1600px]:flex-col min-[1600px]:gap-2 min-[1600px]:overflow-visible {className}"
 >
   {#each periods as item (item.range.start)}
     {@const current =
       item.range.start === period.start && item.range.end === period.end}
     <a
       aria-current={current ? "page" : undefined}
-      class="cladd-surface cladd-outline flex w-40 shrink-0 flex-col gap-0.5 rounded-cladd-md px-3 py-2 text-[12px] min-[1600px]:w-auto {current
+      class="cladd-surface cladd-outline flex min-w-0 flex-col gap-0.5 rounded-cladd-md px-3 py-2 text-[12px] {current
         ? "bg-row-cursor outline-2 outline-brand -outline-offset-2"
         : "hover:bg-row-hover"}"
       href={href(item.range)}
diff --git a/src/lib/components/transactions/TransactionTable.svelte b/src/lib/components/transactions/TransactionTable.svelte
index cb3dfd7..a7af239 100644
--- a/src/lib/components/transactions/TransactionTable.svelte
+++ b/src/lib/components/transactions/TransactionTable.svelte
@@ -332,11 +332,16 @@
   <td class="text-right">
     {@render money(amount)}
     {#if foreign}
-      <div class="num text-[12px] text-cladd-fg-soft">
+      <div class="num text-[12px] text-cladd-fg-soft lg:hidden">
         {formatMoney(foreign)}
       </div>
     {/if}
   </td>
+  <td class="num text-right text-[12px] text-cladd-fg-soft max-lg:hidden">
+    {#if foreign}
+      {formatMoney(foreign)}
+    {/if}
+  </td>
   {#if accountId}
     <td class="text-right">{@render plain(balanceAfter(split, accountId))}</td>
   {/if}
@@ -414,6 +419,7 @@
       <div>{@render money(sum)}</div>
     {/each}
   </td>
+  <td class="max-lg:hidden"></td>
   {#if accountId}
     <td></td>
   {/if}
@@ -478,6 +484,7 @@
             <th class="w-6 max-sm:hidden"><span class="sr-only">Type</span></th>
             <th>Description</th>
             <th class="w-28 text-right md:w-32">Amount</th>
+            <th class="w-24 text-right max-lg:hidden">Foreign</th>
             {#if accountId}
               <th class="w-32 text-right">Balance</th>
             {/if}
diff --git a/src/routes/transactions/[type=txtype]/ListPage.svelte b/src/routes/transactions/[type=txtype]/ListPage.svelte
index 403cc4f..4cda7af 100644
--- a/src/routes/transactions/[type=txtype]/ListPage.svelte
+++ b/src/routes/transactions/[type=txtype]/ListPage.svelte
@@ -234,6 +234,6 @@
     {/snippet}
   </Box>
   {#if !everything}
-    <Periods class="order-first min-[1600px]:order-none" {type} />
+    <Periods {type} />
   {/if}
 </div>