fix(transactions,editor,reports): v1 period column, one amount edge, unclipped report numbers, solid save, mobile headers

src/routes/transactions/[type=txtype]/ListPage.svelte

@@ -9,6 +9,7 @@
   import PageHeader from "#lib/components/shell/PageHeader.svelte";
   import Pager from "#lib/components/transactions/Pager.svelte";
   import PeriodSummary from "#lib/components/transactions/PeriodSummary.svelte";
+  import Periods from "#lib/components/transactions/Periods.svelte";
   import QueryInput from "#lib/components/transactions/QueryInput.svelte";
   import TransactionTable from "#lib/components/transactions/TransactionTable.svelte";
   import Button from "#lib/components/ui/button/button.svelte";
@@ -191,39 +192,48 @@
   />
 {/if}
 
-<Box body="p-0" title={LIST_TITLE[type] ?? "Transactions"}>
-  {#snippet tools()}
-    <span class="max-sm:hidden">
-      <Pager
-        href={pageHref}
-        keys
-        page={pageNo}
-        pages={pagination?.total_pages ?? 1}
-      />
-    </span>
-  {/snippet}
-  <TransactionTable
-    empty={everything ? "No transactions." : "No transactions in this period."}
-    groups={list.data?.data ?? []}
-    id="tx-list"
-    loading={list.isFetching}
-  />
-  {#snippet footer()}
-    {#if everything}
-      <a class="text-brand hover:underline" href={listPath(type)}
-        >Show the current period and overview</a
-      >
-    {:else}
-      <a class="text-brand hover:underline" href={`${listPath(type)}/all`}
-        >Show all transactions without grouping them by date</a
-      >
-    {/if}
-    <span class="ml-auto">
-      <Pager
-        href={pageHref}
-        page={pageNo}
-        pages={pagination?.total_pages ?? 1}
-      />
-    </span>
-  {/snippet}
-</Box>
+<div
+  class="grid items-start gap-4 min-[1600px]:grid-cols-[minmax(0,1fr)_13rem]"
+>
+  <Box body="p-0" title={LIST_TITLE[type] ?? "Transactions"}>
+    {#snippet tools()}
+      <span class="max-sm:hidden">
+        <Pager
+          href={pageHref}
+          keys
+          page={pageNo}
+          pages={pagination?.total_pages ?? 1}
+        />
+      </span>
+    {/snippet}
+    <TransactionTable
+      empty={everything
+        ? "No transactions."
+        : "No transactions in this period."}
+      groups={list.data?.data ?? []}
+      id="tx-list"
+      loading={list.isFetching}
+    />
+    {#snippet footer()}
+      {#if everything}
+        <a class="text-brand hover:underline" href={listPath(type)}
+          >Show the current period and overview</a
+        >
+      {:else}
+        <a class="text-brand hover:underline" href={`${listPath(type)}/all`}
+          >Show all transactions without grouping them by date</a
+        >
+      {/if}
+      <span class="ml-auto">
+        <Pager
+          href={pageHref}
+          page={pageNo}
+          pages={pagination?.total_pages ?? 1}
+        />
+      </span>
+    {/snippet}
+  </Box>
+  {#if !everything}
+    <Periods class="order-first min-[1600px]:order-none" {type} />
+  {/if}
+</div>