fix(budgets,tags,piggy-banks,dashboard): live buttons that answer in place, lucide icons, mobile wrapping

src/lib/components/dashboard/InfoBoxes.svelte

@@ -114,7 +114,7 @@
     </div>
   {:else}
     <div
-      class="truncate font-semibold text-[18px] text-cladd-fg tracking-[-0.02em] sm:text-[22px]"
+      class="wrap-anywhere font-semibold text-[18px] text-cladd-fg tracking-[-0.02em] sm:text-[22px]"
     >
       {fmt(list[0], abs)}
     </div>
@@ -142,7 +142,7 @@
       {:else}
         <ArrowDown class="size-3.5 shrink-0" />
       {/if}
-      <span class="truncate"
+      <span
         ><span class="num">{delta.text}</span>
         <span class="text-cladd-fg-soft">than {prevName}</span></span
       >
@@ -203,18 +203,20 @@
       segments={[{ color: "var(--ff-series-3)", value: paidShare.paid }]}
     />
   {/if}
-  <div class="truncate text-[12px] text-cladd-fg-soft">
-    Paid:
-    <span class="num"
-      >{paid.length ? paid.map((e) => fmt(e, true)).join(", ") : "0"}</span
-    >
+  <div class="flex flex-wrap gap-x-2 text-[12px] text-cladd-fg-soft">
+    <span>Paid:</span>
+    {#each paid as e (e.code)}
+      <span class="num">{fmt(e, true)}</span>
+    {:else}
+      <span class="num">0</span>
+    {/each}
   </div>
 {/snippet}
 
 {#snippet leftToSpend()}
   {@render values(left)}
   {#if left[0]?.sub}
-    <div class="truncate text-[12px] text-cladd-fg-soft">
+    <div class="text-[12px] text-cladd-fg-soft">
       {leftState === "none" ? "" : "Per day: "}<span class="num"
         >{left[0].sub}</span
       >