fix(settings): space the stacked bands, and give each row action a hit area

Adopts NativeSelect for the base-currency, per-post and rule-kind selects.

Spacing. In Posts the table, the "Archiving hides a post…" footnote and the
add-post row were three siblings with no margin between them at all: the
footnote's own line-height was the only gap, so the three read as one
undifferentiated block. The footnote now has room and the add row is its own
band under a rule. Same for the add-currency row and "Fetch rates now",
which sat 8px under the paragraph explaining it.

Controls. The rule-summary trigger — the only way into a post's allocation
history — measured `h=20 pad=0 rad=0`. It gets a 24px box and the row's
hover wash. `up` / `down` / `archive` were three inline-flex siblings with
nothing between them, so their hover backgrounds touched and the cell read
as one wide slab. "Fetch rates now" was `sm` in a page where every other
section-level action is default height, leaving it 4px short of the fields
beside it.

Also: the add-currency row labelled three of its four fields by placeholder
and the fourth with a visible DECIMALS label, directly below a DECIMALS
column heading that already said it — so that label read as a heading for
the whole row. It becomes an aria-label. "Reset everything…" moves out of
the export group it was fourth in and takes a destructive border.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/ui/components/RuleHistory.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { NativeSelect } from "@/components/ui/native-select";
 import { useMutate } from "../hooks/useMutate.ts";
 import { removeRuleFrom, setRuleFrom } from "../../store/actions.ts";
 import { currentMonth } from "../../store/index.ts";
@@ -47,7 +48,7 @@ export function RuleHistory({ post }: Props) {
   }
 
   return (
-    <div className="space-y-2 rounded border p-3">
+    <div className="space-y-3 rounded-md border border-budget-rule p-3">
       {post.rules.length === 0 ? (
         <p className="text-xs text-muted-foreground">
           Not budgeted. Until a rule starts, this post is allocated nothing —
@@ -99,8 +100,8 @@ export function RuleHistory({ post }: Props) {
             setFrom(next);
           }}
         />
-        <select
-          className="h-8 rounded border bg-background px-1 text-xs"
+        <NativeSelect
+          className="h-8 w-auto text-xs md:text-xs"
           aria-label="Rule kind"
           value={kind}
           onChange={(event) => {
@@ -110,7 +111,7 @@ export function RuleHistory({ post }: Props) {
         >
           <option value="percentOfIncome">% of income</option>
           <option value="fixed">fixed amount</option>
-        </select>
+        </NativeSelect>
         <Input
           className="font-money h-8 w-24"
           type="number"