diff --git a/src/components/ActivityTimeline.test.tsx b/src/components/ActivityTimeline.test.tsx
index 6e77c88..0809aa6 100644
--- a/src/components/ActivityTimeline.test.tsx
+++ b/src/components/ActivityTimeline.test.tsx
@@ -486,4 +486,296 @@ describe("ActivityTimeline", () => {
     const filterBtn = screen.getByRole("button", { name: /toggle filters/i });
     expect(filterBtn).toBeInTheDocument();
   });
+
+  // ── Status filter chips (issue #960) ────────────────────────────────────
+
+  describe("status filter", () => {
+    function makeMixedStatusGroup(): TimelineGroup[] {
+      return [
+        {
+          date: "2026-07-26",
+          transactions: [
+            makeGroupedTx({ hash: "hash-ok", status: "success" }),
+            makeGroupedTx({ hash: "hash-bad", status: "failed" }),
+          ],
+        },
+      ];
+    }
+
+    it("shows all transactions when the All chip is selected (default)", async () => {
+      mockGetTimeline(makeMixedStatusGroup(), 2);
+      vi.mocked(useSorokit).mockReturnValue(
+        DEFAULT_CONTEXT as unknown as ReturnType<typeof useSorokit>,
+      );
+
+      render(<ActivityTimeline />);
+      await waitFor(() => {
+        expect(screen.getAllByTitle("Copy transaction hash")).toHaveLength(2);
+      });
+    });
+
+    it("shows only successful transactions when the Succeeded chip is selected", async () => {
+      mockGetTimeline(makeMixedStatusGroup(), 2);
+      vi.mocked(useSorokit).mockReturnValue(
+        DEFAULT_CONTEXT as unknown as ReturnType<typeof useSorokit>,
+      );
+
+      render(<ActivityTimeline />);
+      await waitFor(() => {
+        expect(screen.getAllByTitle("Copy transaction hash")).toHaveLength(2);
+      });
+
+      fireEvent.click(screen.getByRole("button", { name: "Succeeded" }));
+
+      await waitFor(() => {
+        expect(screen.getAllByTitle("Copy transaction hash")).toHaveLength(1);
+      });
+    });
+
+    it("shows only failed transactions when the Unsuccessful chip is selected", async () => {
+      mockGetTimeline(makeMixedStatusGroup(), 2);
+      vi.mocked(useSorokit).mockReturnValue(
+        DEFAULT_CONTEXT as unknown as ReturnType<typeof useSorokit>,
+      );
+
+      render(<ActivityTimeline />);
+      await waitFor(() => {
+        expect(screen.getAllByTitle("Copy transaction hash")).toHaveLength(2);
+      });
+
+      fireEvent.click(screen.getByRole("button", { name: "Unsuccessful" }));
+
+      await waitFor(() => {
+        const rows = screen.getAllByTitle("Copy transaction hash");
+        expect(rows).toHaveLength(1);
+      });
+    });
+
+    it("returns to showing all transactions when the All chip is reselected", async () => {
+      mockGetTimeline(makeMixedStatusGroup(), 2);
+      vi.mocked(useSorokit).mockReturnValue(
+        DEFAULT_CONTEXT as unknown as ReturnType<typeof useSorokit>,
+      );
+
+      render(<ActivityTimeline />);
+      await waitFor(() => {
+        expect(screen.getAllByTitle("Copy transaction hash")).toHaveLength(2);
+      });
+
+      fireEvent.click(screen.getByRole("button", { name: "Succeeded" }));
+      await waitFor(() => {
+        expect(screen.getAllByTitle("Copy transaction hash")).toHaveLength(1);
+      });
+
+      fireEvent.click(screen.getByRole("button", { name: "All" }));
+      await waitFor(() => {
+        expect(screen.getAllByTitle("Copy transaction hash")).toHaveLength(2);
+      });
+    });
+
+    it("shows 'No transactions match your filters' when a status filter leaves nothing", async () => {
+      mockGetTimeline(
+        [
+          {
+            date: "2026-07-26",
+            transactions: [makeGroupedTx({ status: "success" })],
+          },
+        ],
+        1,
+      );
+      vi.mocked(useSorokit).mockReturnValue(
+        DEFAULT_CONTEXT as unknown as ReturnType<typeof useSorokit>,
+      );
+
+      render(<ActivityTimeline />);
+      await waitFor(() => {
+        expect(screen.getAllByTitle("Copy transaction hash")).toHaveLength(1);
+      });
+
+      fireEvent.click(screen.getByRole("button", { name: "Unsuccessful" }));
+
+      await waitFor(() => {
+        expect(screen.getByText("No transactions match your filters")).toBeInTheDocument();
+      });
+    });
+
+    it("marks the active status chip with aria-pressed=true", async () => {
+      mockGetTimeline(makeMixedStatusGroup(), 2);
+      vi.mocked(useSorokit).mockReturnValue(
+        DEFAULT_CONTEXT as unknown as ReturnType<typeof useSorokit>,
+      );
+
+      render(<ActivityTimeline />);
+      await waitFor(() => {
+        expect(screen.getAllByTitle("Copy transaction hash")).toHaveLength(2);
+      });
+
+      expect(screen.getByRole("button", { name: "All" })).toHaveAttribute(
+        "aria-pressed",
+        "true",
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: "Succeeded" }));
+      expect(screen.getByRole("button", { name: "Succeeded" })).toHaveAttribute(
+        "aria-pressed",
+        "true",
+      );
+      expect(screen.getByRole("button", { name: "All" })).toHaveAttribute(
+        "aria-pressed",
+        "false",
+      );
+    });
+  });
+
+  // ── Relative date labels: Today / Yesterday (issue #960) ────────────────
+
+  describe("relative date labels", () => {
+    function isoDateDaysAgo(daysAgo: number): string {
+      const d = new Date();
+      d.setDate(d.getDate() - daysAgo);
+      return d.toISOString().slice(0, 10);
+    }
+
+    it("labels today's group as 'Today' instead of the full date", async () => {
+      const groups: TimelineGroup[] = [
+        {
+          date: isoDateDaysAgo(0),
+          transactions: [makeGroupedTx({ date: isoDateDaysAgo(0) })],
+        },
+      ];
+      mockGetTimeline(groups, 1);
+      vi.mocked(useSorokit).mockReturnValue(
+        DEFAULT_CONTEXT as unknown as ReturnType<typeof useSorokit>,
+      );
+
+      render(<ActivityTimeline />);
+      await waitFor(() => {
+        expect(screen.getByText("Today")).toBeInTheDocument();
+      });
+    });
+
+    it("labels yesterday's group as 'Yesterday' instead of the full date", async () => {
+      const groups: TimelineGroup[] = [
+        {
+          date: isoDateDaysAgo(1),
+          transactions: [makeGroupedTx({ date: isoDateDaysAgo(1) })],
+        },
+      ];
+      mockGetTimeline(groups, 1);
+      vi.mocked(useSorokit).mockReturnValue(
+        DEFAULT_CONTEXT as unknown as ReturnType<typeof useSorokit>,
+      );
+
+      render(<ActivityTimeline />);
+      await waitFor(() => {
+        expect(screen.getByText("Yesterday")).toBeInTheDocument();
+      });
+    });
+
+    it("labels a group from several days ago with its full weekday/month/day date", async () => {
+      const longAgo = isoDateDaysAgo(10);
+      const groups: TimelineGroup[] = [
+        {
+          date: longAgo,
+          transactions: [makeGroupedTx({ date: longAgo })],
+        },
+      ];
+      mockGetTimeline(groups, 1);
+      vi.mocked(useSorokit).mockReturnValue(
+        DEFAULT_CONTEXT as unknown as ReturnType<typeof useSorokit>,
+      );
+
+      render(<ActivityTimeline />);
+      await waitFor(() => {
+        const expectedLabel = new Date(longAgo).toLocaleDateString("en-US", {
+          weekday: "long",
+          month: "long",
+          day: "numeric",
+          year: "numeric",
+        });
+        expect(screen.getByText(expectedLabel)).toBeInTheDocument();
+        expect(screen.queryByText("Today")).not.toBeInTheDocument();
+        expect(screen.queryByText("Yesterday")).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── Large-list rendering performance (issue #960) ───────────────────────
+
+  describe("large list rendering", () => {
+    it("marks each transaction row with content-visibility so off-screen rows skip layout/paint", async () => {
+      const manyTransactions = Array.from({ length: 50 }, (_, i) =>
+        makeGroupedTx({ hash: `hash-${i}`, status: "success" }),
+      );
+      const groups: TimelineGroup[] = [{ date: "2026-07-26", transactions: manyTransactions }];
+      mockGetTimeline(groups, 50);
+      vi.mocked(useSorokit).mockReturnValue(
+        DEFAULT_CONTEXT as unknown as ReturnType<typeof useSorokit>,
+      );
+
+      const { container } = render(<ActivityTimeline />);
+      await waitFor(() => {
+        expect(screen.getAllByTitle("Copy transaction hash")).toHaveLength(50);
+      });
+
+      const rowWrappers = container.querySelectorAll('[style*="content-visibility"]');
+      expect(rowWrappers.length).toBe(50);
+      for (const wrapper of rowWrappers) {
+        expect((wrapper as HTMLElement).style.contentVisibility).toBe("auto");
+      }
+    });
+
+    it("switches an expanded row's content-visibility to visible so its operations stay rendered", async () => {
+      const groups: TimelineGroup[] = [
+        {
+          date: "2026-07-26",
+          transactions: [
+            makeGroupedTx({
+              hash: "hash-expand-me",
+              operationCount: 1,
+              operations: [makeOperation({ type: "payment" })],
+            }),
+          ],
+        },
+      ];
+      mockGetTimeline(groups, 1);
+      vi.mocked(useSorokit).mockReturnValue(
+        DEFAULT_CONTEXT as unknown as ReturnType<typeof useSorokit>,
+      );
+
+      const { container } = render(<ActivityTimeline />);
+      await waitFor(() => {
+        expect(screen.getAllByTitle("Copy transaction hash")).toHaveLength(1);
+      });
+
+      const wrapper = container.querySelector('[style*="content-visibility"]') as HTMLElement;
+      expect(wrapper.style.contentVisibility).toBe("auto");
+
+      fireEvent.click(screen.getByRole("button", { name: /1 operations/i }));
+
+      await waitFor(() => {
+        expect(wrapper.style.contentVisibility).toBe("visible");
+      });
+    });
+  });
+
+  // ── Sticky date headers (issue #960) ─────────────────────────────────────
+
+  describe("sticky date headers", () => {
+    it("applies sticky positioning to every date group header, not just the first", async () => {
+      const groups = makeTimelineGroups(3);
+      mockGetTimeline(groups, 6);
+      vi.mocked(useSorokit).mockReturnValue(
+        DEFAULT_CONTEXT as unknown as ReturnType<typeof useSorokit>,
+      );
+
+      const { container } = render(<ActivityTimeline />);
+      await waitFor(() => {
+        expect(screen.getAllByTitle("Copy transaction hash")).toHaveLength(6);
+      });
+
+      const headers = container.querySelectorAll(".sticky.top-0");
+      expect(headers.length).toBe(groups.length);
+    });
+  });
 });
\ No newline at end of file
diff --git a/src/components/ActivityTimeline.tsx b/src/components/ActivityTimeline.tsx
index 1135083..dda6915 100644
--- a/src/components/ActivityTimeline.tsx
+++ b/src/components/ActivityTimeline.tsx
@@ -19,6 +19,7 @@ import type { GroupedTransaction, Operation, TimelineFilter, TimelineGroup } fro
 import { cn, truncateAddress } from "@/lib/utils";
 
 const PAGE_SIZE = 10;
+const MS_PER_DAY = 86_400_000;
 const OPERATION_TYPES = [
   { value: "all", label: "All Operations" },
   { value: "payment", label: "Payments" },
@@ -32,9 +33,35 @@ const OPERATION_TYPES = [
   { value: "allow_trust", label: "Allow Trust" },
   { value: "account_creator", label: "Account Creator" },
 ];
+// Labels are deliberately distinct from the row-level "Success"/"Failed"
+// badge text (e.g. "Succeeded" rather than "Success") so a test asserting
+// on that badge text can't accidentally match one of these filter chips
+// instead, which would let it pass before the real transaction data has
+// even loaded.
+const STATUS_FILTER_CHIPS = [
+  { value: "all", label: "All" },
+  { value: "success", label: "Succeeded" },
+  { value: "failed", label: "Unsuccessful" },
+] as const;
 
-function formatDateLabel(dateStr: string): string {
+/**
+ * Formats a group's date as "Today", "Yesterday", or a full date (issue
+ * #960): a bare weekday/month/day label gives no sense of recency at a
+ * glance, and the two most recent days are the ones a user checks most
+ * often. Compares local calendar days, matching how `group.date` is
+ * produced from local-time buckets server-side.
+ */
+function formatDateLabel(dateStr: string, now: Date = new Date()): string {
   const d = new Date(dateStr);
+  const startOfDay = (date: Date) =>
+    new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+  const daysAgo = Math.round(
+    (startOfDay(now) - startOfDay(d)) / MS_PER_DAY,
+  );
+
+  if (daysAgo === 0) return "Today";
+  if (daysAgo === 1) return "Yesterday";
+
   return d.toLocaleDateString("en-US", {
     weekday: "long",
     month: "long",
@@ -159,7 +186,17 @@ function GroupedTxRow({ tx, onCopy, explorerUrl }: { tx: GroupedTransaction; onC
   }, []);
 
   return (
-    <div>
+    <div
+      // Skip layout/paint for rows scrolled out of view (issue #960): a
+      // zero-dependency alternative to a virtualization library, keeping
+      // hundreds of rows from all mounting their full DOM at once.
+      // content-visibility: visible on the expanded row so its operations
+      // list stays rendered and measured while open.
+      style={{
+        contentVisibility: isExpanded ? "visible" : "auto",
+        containIntrinsicSize: "0 57px",
+      }}
+    >
       <div
         role="button"
         tabIndex={0}
@@ -254,6 +291,27 @@ function BigChevronIcon({ expanded }: { expanded: boolean }) {
   );
 }
 
+type StatusFilter = "all" | "success" | "failed";
+
+/**
+ * Applies the status filter client-side, dropping groups left with no
+ * transactions afterward (issue #960). Status filtering doesn't need a
+ * server round trip: the current page's transactions are already loaded,
+ * and toggling "Failed" to spot a stuck payment should feel instant.
+ */
+function filterGroupsByStatus(
+  groups: TimelineGroup[],
+  statusFilter: StatusFilter,
+): TimelineGroup[] {
+  if (statusFilter === "all") return groups;
+  return groups
+    .map((group) => ({
+      ...group,
+      transactions: group.transactions.filter((tx) => tx.status === statusFilter),
+    }))
+    .filter((group) => group.transactions.length > 0);
+}
+
 export function ActivityTimeline({ className }: { className?: string }) {
   const { address, isConnected, network, client } = useSorokit();
   const [groups, setGroups] = useState<TimelineGroup[]>([]);
@@ -266,13 +324,15 @@ export function ActivityTimeline({ className }: { className?: string }) {
   const [dateFrom, setDateFrom] = useState("");
   const [dateTo, setDateTo] = useState("");
   const [searchInput, setSearchInput] = useState("");
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
   const abortRef = useRef<AbortController | null>(null);
 
   const loadTimeline = useCallback(() => {
     if (!address || !client) return;
 
     abortRef.current?.abort();
-    abortRef.current = new AbortController();
+    const controller = new AbortController();
+    abortRef.current = controller;
 
     setLoading(true);
     setError(null);
@@ -293,6 +353,10 @@ export function ActivityTimeline({ className }: { className?: string }) {
         filters: f,
       })
       .then(({ data, error: err, total: t }) => {
+        // A newer request (or unmount) has already superseded this one;
+        // applying its response now would overwrite fresher state with
+        // stale data.
+        if (controller.signal.aborted) return;
         if (err) {
           setError(err);
           return;
@@ -302,9 +366,11 @@ export function ActivityTimeline({ className }: { className?: string }) {
         setError(null);
       })
       .catch((err) => {
+        if (controller.signal.aborted) return;
         setError(err instanceof Error ? err.message : "Failed to load activity");
       })
       .finally(() => {
+        if (controller.signal.aborted) return;
         setLoading(false);
       });
   }, [address, client, page, filters, dateFrom, dateTo, searchInput]);
@@ -316,10 +382,16 @@ export function ActivityTimeline({ className }: { className?: string }) {
     }, 0);
     return () => {
       window.clearTimeout(timerId);
+      // Unmounting (or a dependency change about to re-run this effect)
+      // invalidates any fetch loadTimeline already kicked off; its
+      // eventual response is handled by the aborted-signal check inside
+      // loadTimeline itself.
+      abortRef.current?.abort();
     };
   }, [address, loadTimeline]);
 
   const totalPages = Math.ceil(total / PAGE_SIZE);
+  const visibleGroups = filterGroupsByStatus(groups, statusFilter);
 
   const handleCopyHash = useCallback((hash: string) => {
     navigator.clipboard.writeText(hash).catch(() => {});
@@ -330,6 +402,7 @@ export function ActivityTimeline({ className }: { className?: string }) {
     setDateFrom("");
     setDateTo("");
     setSearchInput("");
+    setStatusFilter("all");
     setPage(1);
   }, []);
 
@@ -337,7 +410,8 @@ export function ActivityTimeline({ className }: { className?: string }) {
     filters.operationType !== "all" ||
     dateFrom !== "" ||
     dateTo !== "" ||
-    searchInput !== "";
+    searchInput !== "" ||
+    statusFilter !== "all";
 
   return (
     <div
@@ -370,6 +444,28 @@ export function ActivityTimeline({ className }: { className?: string }) {
         </div>
       </div>
 
+      <div
+        role="group"
+        aria-label="Filter by status"
+        className="flex items-center gap-2 px-5 py-3 border-b border-line"
+      >
+        {STATUS_FILTER_CHIPS.map((chip) => (
+          <button
+            key={chip.value}
+            onClick={() => setStatusFilter(chip.value)}
+            aria-pressed={statusFilter === chip.value}
+            className={cn(
+              "px-3 py-1 rounded-full text-[12px] font-medium border transition-colors",
+              statusFilter === chip.value
+                ? "bg-brand-dim text-brand border-brand/20"
+                : "bg-surface-2 text-ink-3 border-line hover:bg-surface-2",
+            )}
+          >
+            {chip.label}
+          </button>
+        ))}
+      </div>
+
       {filterOpen && (
         <div className="px-5 py-4 border-b border-line bg-surface-2 flex flex-col gap-3 animate-in fade-in">
           <div className="flex flex-wrap items-center gap-3">
@@ -470,31 +566,25 @@ export function ActivityTimeline({ className }: { className?: string }) {
             <SkeletonRow key={i} />
           ))}
         </div>
-      ) : groups.length === 0 ? (
+      ) : visibleGroups.length === 0 ? (
         <p className="text-[13px] text-ink-3 text-center py-10">
           {hasActiveFilters ? "No transactions match your filters" : "No activity yet"}
         </p>
       ) : (
         <>
           <div>
-            {groups.map((group, groupIndex) => (
+            {visibleGroups.map((group) => (
               <div key={group.date}>
-                {groupIndex > 0 && (
-                  <div className="flex items-center gap-3 px-5 py-2">
-                    <div className="flex-1 h-px bg-line" />
-                    <span className="text-[11px] font-semibold uppercase tracking-[0.1em] text-ink-4">
-                      {formatDateLabel(group.date)}
-                    </span>
-                    <div className="flex-1 h-px bg-line" />
-                  </div>
-                )}
-                {groupIndex === 0 && (
-                  <div className="px-5 py-2">
-                    <span className="text-[11px] font-semibold uppercase tracking-[0.1em] text-ink-4">
-                      {formatDateLabel(group.date)}
-                    </span>
-                  </div>
-                )}
+                {/* Sticky so the date a transaction belongs to stays
+                    visible while scrolling through a long group (issue
+                    #960). */}
+                <div className="flex items-center gap-3 px-5 py-2 sticky top-0 z-10 bg-surface">
+                  <div className="flex-1 h-px bg-line" />
+                  <span className="text-[11px] font-semibold uppercase tracking-[0.1em] text-ink-4">
+                    {formatDateLabel(group.date)}
+                  </span>
+                  <div className="flex-1 h-px bg-line" />
+                </div>
                 {group.transactions.map((tx) => {
                   const url = explorerTxUrl(network?.name ?? null, tx.hash);
                   return (
diff --git a/src/components/TransactionHistory.tsx b/src/components/TransactionHistory.tsx
index ab77705..4dfe683 100644
--- a/src/components/TransactionHistory.tsx
+++ b/src/components/TransactionHistory.tsx
@@ -5,6 +5,7 @@ import {
   CheckmarkCircle01Icon,
   CoinsSwapIcon,
   ContractsIcon,
+  Copy01Icon,
   GiftIcon,
   Search01Icon,
 } from "@hugeicons/core-free-icons";
@@ -217,8 +218,11 @@ export const TxRow = memo(function TxRow({
       className="flex items-center justify-between px-5 py-3.5 border-b border-line last:border-0 gap-4 hover:bg-surface-2 transition-colors cursor-pointer"
     >
       <div className="flex items-center gap-3 min-w-0">
-        {/* Status icon */}
+        {/* Status icon: purely decorative, hidden from the accessibility
+            tree since the Success/Failed badge below already announces
+            the same status as real text (issue #961). */}
         <div
+          aria-hidden="true"
           data-testid="status-icon-container"
           className={`w-8 h-8 rounded-full flex items-center justify-center shrink-0 ${tx.successful ? "bg-success-dim" : "bg-error-dim"}`}
         >
@@ -235,10 +239,13 @@ export const TxRow = memo(function TxRow({
           <span data-txhash className="truncate">
             {truncateAddress(tx.hash, 10, 6)}
           </span>
-          <div className="flex items-center gap-2">
-            <span className="text-[10px] text-ink-3">Ledger {tx.ledger}</span>
+          <div className="flex items-center gap-2 min-w-0">
+            <span className="text-[10px] text-ink-3 shrink-0">Ledger {tx.ledger}</span>
             {tx.memo && (
-              <span className="text-[10px] text-ink-3" title={tx.memo}>
+              <span
+                className="text-[10px] text-ink-3 truncate min-w-0"
+                title={tx.memo}
+              >
                 · {truncateMemo(tx.memo)}
               </span>
             )}
@@ -265,6 +272,31 @@ export const TxRow = memo(function TxRow({
               {tx.operationCount} ops
             </Badge>
           )}
+          {/* A real <button> would be invalid HTML nested inside the row's
+              own <a> wrapper (when it links to the explorer), so this
+              uses role="button" on a <span> instead, with the same click
+              and keyboard handling a native button gets for free. */}
+          <span
+            role="button"
+            tabIndex={0}
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              navigator.clipboard?.writeText(tx.hash).catch(() => {});
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                navigator.clipboard?.writeText(tx.hash).catch(() => {});
+              }
+            }}
+            className="p-1 rounded hover:bg-surface-2 text-ink-3 hover:text-ink transition-colors cursor-pointer"
+            aria-label={`Copy transaction hash ${truncateAddress(tx.hash, 10, 6)}`}
+            title="Copy transaction hash"
+          >
+            <HugeiconsIcon icon={Copy01Icon} size={12} strokeWidth={1.5} />
+          </span>
         </div>
         <div className="flex items-center gap-2">
           <span
diff --git a/src/components/TxRow.test.tsx b/src/components/TxRow.test.tsx
index 204d5ca..8146b14 100644
--- a/src/components/TxRow.test.tsx
+++ b/src/components/TxRow.test.tsx
@@ -1,9 +1,11 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 
 import type { Transaction } from "@/lib/client";
 
 import { TxRow } from "./TransactionHistory";
 
+const originalClipboard = navigator.clipboard;
+
 describe("TxRow component", () => {
   it("renders transaction hash, ledger, status badge, fee, and date", () => {
     const tx: Transaction = {
@@ -185,4 +187,148 @@ describe("TxRow component", () => {
     render(<TxRow tx={tx} />);
     expect(screen.getByTestId("op-badge")).toHaveTextContent("Claimable");
   });
+
+  // ── Mobile memo truncation, copy-hash tooltip, icon a11y (issue #961) ────
+
+  describe("mobile and accessibility fixes", () => {
+    afterEach(() => {
+      Object.defineProperty(navigator, "clipboard", {
+        value: originalClipboard,
+        configurable: true,
+      });
+    });
+
+    it("applies a truncate class to the memo so it clips instead of pushing columns off-screen", () => {
+      const tx: Transaction = {
+        hash: "hash-long-memo",
+        ledger: 3000,
+        createdAt: new Date().toISOString(),
+        successful: true,
+        operationCount: 1,
+        feePaid: "100",
+        memo: "a fairly long memo that could overflow a narrow mobile column",
+      } as Transaction;
+      render(<TxRow tx={tx} />);
+
+      const memoEl = screen.getByTitle(
+        "a fairly long memo that could overflow a narrow mobile column",
+      );
+      expect(memoEl).toHaveClass("truncate");
+    });
+
+    it("hides the decorative status icon from the accessibility tree", () => {
+      const tx: Transaction = {
+        hash: "hash-icon-a11y",
+        ledger: 3001,
+        createdAt: new Date().toISOString(),
+        successful: true,
+        operationCount: 1,
+        feePaid: "100",
+      } as Transaction;
+      render(<TxRow tx={tx} />);
+
+      expect(screen.getByTestId("status-icon-container")).toHaveAttribute(
+        "aria-hidden",
+        "true",
+      );
+    });
+
+    it("hides the decorative status icon from the accessibility tree for a failed transaction too", () => {
+      const tx: Transaction = {
+        hash: "hash-icon-a11y-fail",
+        ledger: 3002,
+        createdAt: new Date().toISOString(),
+        successful: false,
+        operationCount: 1,
+        feePaid: "0",
+      } as Transaction;
+      render(<TxRow tx={tx} />);
+
+      expect(screen.getByTestId("status-icon-container")).toHaveAttribute(
+        "aria-hidden",
+        "true",
+      );
+    });
+
+    it("renders a copy-hash control with an accessible name and tooltip", () => {
+      const tx: Transaction = {
+        hash: "hashcopytarget123456",
+        ledger: 3003,
+        createdAt: new Date().toISOString(),
+        successful: true,
+        operationCount: 1,
+        feePaid: "100",
+      } as Transaction;
+      render(<TxRow tx={tx} />);
+
+      const copyControl = screen.getByTitle("Copy transaction hash");
+      expect(copyControl).toHaveAttribute(
+        "aria-label",
+        expect.stringContaining("Copy transaction hash"),
+      );
+    });
+
+    it("copies the full transaction hash to the clipboard when the copy control is activated", () => {
+      const writeText = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText },
+        configurable: true,
+      });
+
+      const tx: Transaction = {
+        hash: "hashcopytarget123456",
+        ledger: 3004,
+        createdAt: new Date().toISOString(),
+        successful: true,
+        operationCount: 1,
+        feePaid: "100",
+      } as Transaction;
+      render(<TxRow tx={tx} />);
+
+      fireEvent.click(screen.getByTitle("Copy transaction hash"));
+      expect(writeText).toHaveBeenCalledWith("hashcopytarget123456");
+    });
+
+    it("copies the hash on Enter and Space without navigating the row", () => {
+      const writeText = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText },
+        configurable: true,
+      });
+
+      const tx: Transaction = {
+        hash: "hashcopytarget123456",
+        ledger: 3005,
+        createdAt: new Date().toISOString(),
+        successful: true,
+        operationCount: 1,
+        feePaid: "100",
+      } as Transaction;
+      render(<TxRow tx={tx} />);
+
+      const copyControl = screen.getByTitle("Copy transaction hash");
+      fireEvent.keyDown(copyControl, { key: "Enter" });
+      expect(writeText).toHaveBeenCalledWith("hashcopytarget123456");
+
+      fireEvent.keyDown(copyControl, { key: " " });
+      expect(writeText).toHaveBeenCalledTimes(2);
+    });
+
+    it("does not navigate the row when the copy control inside an explorer-linked row is clicked", () => {
+      const tx: Transaction = {
+        hash: "hashcopytarget123456",
+        ledger: 3006,
+        createdAt: new Date().toISOString(),
+        successful: true,
+        operationCount: 1,
+        feePaid: "100",
+      } as Transaction;
+      render(<TxRow tx={tx} networkName="mainnet" />);
+
+      const copyControl = screen.getByTitle("Copy transaction hash");
+      const clickEvent = new MouseEvent("click", { bubbles: true, cancelable: true });
+      fireEvent(copyControl, clickEvent);
+      expect(clickEvent.defaultPrevented).toBe(true);
+    });
+  });
 });
diff --git a/src/components/index.ts b/src/components/index.ts
index 6e7a128..b4bfdfc 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -41,7 +41,13 @@ export { InfoCell } from "./ui/InfoCell";
 export { Input } from "./ui/Input";
 export { LabelledValue } from "./ui/LabelledValue";
 export { Separator } from "./ui/Separator";
-export { AssetRowSkeleton, Skeleton, SkeletonCard, SkeletonRow } from "./ui/Skeleton";
+export {
+  AssetRowSkeleton,
+  Skeleton,
+  SkeletonCard,
+  SkeletonRow,
+  SkeletonTable,
+} from "./ui/Skeleton";
 
 // Error handling
 export { ErrorBoundary } from "./ErrorBoundary";
diff --git a/src/components/ui/Separator.test.tsx b/src/components/ui/Separator.test.tsx
index 67d5934..359fc6a 100644
--- a/src/components/ui/Separator.test.tsx
+++ b/src/components/ui/Separator.test.tsx
@@ -71,4 +71,47 @@ describe("Separator", () => {
     expect(markup).not.toMatch(/bg-\[#/);
     expect(markup).not.toMatch(/#[0-9a-fA-F]{3,8}/);
   });
+
+  // ── Flex-container height collapse (issue #963) ──────────────────────────
+
+  it("applies self-stretch and min-h-full so a vertical separator keeps its height in a stretch flex container", () => {
+    const { container } = render(<Separator orientation="vertical" />);
+    const root = container.firstElementChild as HTMLElement;
+    expect(root).toHaveClass("self-stretch");
+    expect(root).toHaveClass("min-h-full");
+  });
+
+  // ── Decorative / semantic role (issue #963) ──────────────────────────────
+
+  it("exposes role=separator and aria-orientation by default (non-decorative)", () => {
+    const { container } = render(<Separator orientation="vertical" />);
+    const root = container.firstElementChild as HTMLElement;
+    expect(root).toHaveAttribute("role", "separator");
+    expect(root).toHaveAttribute("aria-orientation", "vertical");
+    expect(root).not.toHaveAttribute("aria-hidden");
+  });
+
+  it("hides a decorative horizontal separator from the accessibility tree", () => {
+    const { container } = render(<Separator decorative />);
+    const root = container.firstElementChild as HTMLElement;
+    expect(root).toHaveAttribute("role", "none");
+    expect(root).toHaveAttribute("aria-hidden", "true");
+    expect(root).not.toHaveAttribute("aria-orientation");
+  });
+
+  it("hides a decorative vertical separator from the accessibility tree while keeping its layout classes", () => {
+    const { container } = render(<Separator decorative orientation="vertical" />);
+    const root = container.firstElementChild as HTMLElement;
+    expect(root).toHaveAttribute("role", "none");
+    expect(root).toHaveAttribute("aria-hidden", "true");
+    expect(root).toHaveClass("self-stretch");
+  });
+
+  it("hides a decorative labelled separator from the accessibility tree", () => {
+    const { container } = render(<Separator decorative label="OR" />);
+    const root = container.firstElementChild as HTMLElement;
+    expect(root).toHaveAttribute("role", "none");
+    expect(root).toHaveAttribute("aria-hidden", "true");
+    expect(screen.getByText("OR")).toBeInTheDocument();
+  });
 });
diff --git a/src/components/ui/Separator.tsx b/src/components/ui/Separator.tsx
index 7bce097..1ee5725 100644
--- a/src/components/ui/Separator.tsx
+++ b/src/components/ui/Separator.tsx
@@ -3,6 +3,14 @@ export interface SeparatorProps {
   label?: string;
   orientation?: "horizontal" | "vertical";
   spacing?: "sm" | "md" | "lg";
+  /**
+   * Purely visual separators (no semantic meaning in the layout) should be
+   * hidden from the accessibility tree rather than announced as a
+   * `separator` landmark on every render (issue #963). When true, the root
+   * gets `role="none"` and `aria-hidden="true"` instead of
+   * `role="separator"`/`aria-orientation`.
+   */
+  decorative?: boolean;
 }
 
 const spacingMap = {
@@ -16,13 +24,21 @@ export function Separator({
   label,
   orientation = "horizontal",
   spacing = "md",
+  decorative = false,
 }: SeparatorProps) {
+  const a11yProps = decorative
+    ? { role: "none" as const, "aria-hidden": true as const }
+    : { role: "separator" as const, "aria-orientation": orientation };
+
   if (orientation === "vertical") {
     return (
       <div
-        role="separator"
-        aria-orientation="vertical"
-        className={`w-px h-full bg-line ${className ?? ""}`}
+        {...a11yProps}
+        // self-stretch + min-h-full keep the divider's height tied to its
+        // flex container even when that container uses align-items:
+        // stretch, where an unconstrained h-full alone collapses to 0px
+        // (issue #963).
+        className={`w-px h-full self-stretch min-h-full bg-line ${className ?? ""}`}
       />
     );
   }
@@ -30,8 +46,7 @@ export function Separator({
   if (label) {
     return (
       <div
-        role="separator"
-        aria-orientation="horizontal"
+        {...a11yProps}
         className={`flex items-center gap-3 ${spacingMap[spacing]} ${className ?? ""}`}
       >
         <div className="flex-1 h-px bg-line" />
@@ -43,8 +58,7 @@ export function Separator({
 
   return (
     <div
-      role="separator"
-      aria-orientation="horizontal"
+      {...a11yProps}
       className={`h-px bg-line w-full ${spacingMap[spacing]} ${className ?? ""}`}
     />
   );
diff --git a/src/components/ui/Skeleton.test.tsx b/src/components/ui/Skeleton.test.tsx
index de89de5..0ad04a1 100644
--- a/src/components/ui/Skeleton.test.tsx
+++ b/src/components/ui/Skeleton.test.tsx
@@ -6,6 +6,7 @@ import {
   Skeleton,
   SkeletonCard,
   SkeletonRow,
+  SkeletonTable,
 } from "./Skeleton";
 
 describe("Skeleton", () => {
@@ -38,22 +39,44 @@ describe("Skeleton", () => {
     expect(c2.firstElementChild).toHaveClass("rounded-lg");
   });
 
-  it("uses animate-pulse by default (no variant prop)", () => {
+  it("uses the motion-safe pulse variant by default (no variant prop)", () => {
     const { container } = render(<Skeleton />);
-    expect(container.firstElementChild).toHaveClass("animate-pulse");
+    expect(container.firstElementChild).toHaveClass("motion-safe:animate-pulse");
   });
 
-  it("applies skeleton-shimmer class when variant='shimmer'", () => {
+  it("applies the motion-safe shimmer variant when variant='shimmer'", () => {
     const { container } = render(<Skeleton variant="shimmer" />);
     const el = container.firstElementChild as HTMLElement;
-    expect(el).toHaveClass("skeleton-shimmer");
-    expect(el).not.toHaveClass("animate-pulse");
+    expect(el).toHaveClass("motion-safe:skeleton-shimmer");
+    expect(el).not.toHaveClass("motion-safe:animate-pulse");
   });
 
-  it("applies animate-pulse when variant='pulse' is explicit", () => {
+  it("applies the motion-safe pulse variant when variant='pulse' is explicit", () => {
     const { container } = render(<Skeleton variant="pulse" />);
-    expect(container.firstElementChild).toHaveClass("animate-pulse");
-    expect(container.firstElementChild).not.toHaveClass("skeleton-shimmer");
+    expect(container.firstElementChild).toHaveClass("motion-safe:animate-pulse");
+    expect(container.firstElementChild).not.toHaveClass("motion-safe:skeleton-shimmer");
+  });
+
+  // ── prefers-reduced-motion (issue #962) ──────────────────────────────────
+
+  describe("reduced motion", () => {
+    it("gates the pulse animation on motion-safe and provides a motion-reduce fallback", () => {
+      const { container } = render(<Skeleton variant="pulse" />);
+      const classes = (container.firstElementChild as HTMLElement).className.split(/\s+/);
+      // The bare utility would keep animating even under
+      // prefers-reduced-motion: reduce.
+      expect(classes).toContain("motion-safe:animate-pulse");
+      expect(classes).not.toContain("animate-pulse");
+      expect(classes).toContain("motion-reduce:opacity-60");
+    });
+
+    it("gates the shimmer animation on motion-safe and swaps in a static class under motion-reduce", () => {
+      const { container } = render(<Skeleton variant="shimmer" />);
+      const classes = (container.firstElementChild as HTMLElement).className.split(/\s+/);
+      expect(classes).toContain("motion-safe:skeleton-shimmer");
+      expect(classes).not.toContain("skeleton-shimmer");
+      expect(classes).toContain("motion-reduce:skeleton-shimmer-static");
+    });
   });
 });
 
@@ -135,6 +158,39 @@ describe("SkeletonCard", () => {
   });
 });
 
+describe("SkeletonTable", () => {
+  it("announces a busy/loading state via aria-busy", () => {
+    const { container } = render(<SkeletonTable />);
+    expect(container.firstElementChild).toHaveAttribute("aria-busy", "true");
+  });
+
+  it("renders the default 4 header columns and 4 body rows", () => {
+    render(<SkeletonTable />);
+    const header = screen.getByTestId("skeleton-table-header");
+    expect(header.children.length).toBe(4);
+    expect(screen.getAllByTestId("skeleton-table-row")).toHaveLength(4);
+  });
+
+  it("renders the requested number of rows and columns", () => {
+    render(<SkeletonTable rows={2} columns={6} />);
+    const header = screen.getByTestId("skeleton-table-header");
+    expect(header.children.length).toBe(6);
+
+    const rows = screen.getAllByTestId("skeleton-table-row");
+    expect(rows).toHaveLength(2);
+    for (const row of rows) {
+      expect(row.children.length).toBe(6);
+    }
+  });
+
+  it("lines up each row's columns with a matching grid-template-columns", () => {
+    render(<SkeletonTable rows={1} columns={3} />);
+    const header = screen.getByTestId("skeleton-table-header");
+    const row = screen.getByTestId("skeleton-table-row");
+    expect(header.style.gridTemplateColumns).toBe(row.style.gridTemplateColumns);
+  });
+});
+
 describe("AssetRowSkeleton", () => {
   it("is presentational", () => {
     const { container } = render(<AssetRowSkeleton />);
diff --git a/src/components/ui/Skeleton.tsx b/src/components/ui/Skeleton.tsx
index e4f6e2a..f26de05 100644
--- a/src/components/ui/Skeleton.tsx
+++ b/src/components/ui/Skeleton.tsx
@@ -35,7 +35,13 @@ export function Skeleton({
           : resolvedShape === "square"
             ? "rounded-none"
             : "rounded-lg",
-        variant === "pulse" ? "animate-pulse" : "skeleton-shimmer",
+        // Gate the animation on motion-safe and provide the matching
+        // motion-reduce fallback, rather than an unconditional
+        // animate-pulse/skeleton-shimmer (issue #962): the bare utility
+        // would keep animating even with prefers-reduced-motion set.
+        variant === "pulse"
+          ? "motion-safe:animate-pulse motion-reduce:opacity-60"
+          : "motion-safe:skeleton-shimmer motion-reduce:skeleton-shimmer-static",
         className,
       )}
       {...props}
@@ -158,3 +164,58 @@ export function SkeletonCard({
     </div>
   );
 }
+
+export interface SkeletonTableProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Number of placeholder rows to render. */
+  rows?: number;
+  /** Number of placeholder columns per row. */
+  columns?: number;
+}
+
+/**
+ * Pre-composed table loading state: a header row of column-label
+ * placeholders above `rows` body rows of `columns` cell placeholders each
+ * (issue #962). Columns are laid out with `grid` so every row's cells line
+ * up under the header regardless of `columns`.
+ */
+export function SkeletonTable({
+  rows = 4,
+  columns = 4,
+  className,
+  ...props
+}: SkeletonTableProps) {
+  const gridStyle = { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` };
+  return (
+    <div
+      role="status"
+      aria-busy="true"
+      className={cn("rounded-xl border border-line bg-surface overflow-hidden", className)}
+      {...props}
+    >
+      <div
+        className="grid gap-4 px-5 py-4 border-b border-line"
+        style={gridStyle}
+        data-testid="skeleton-table-header"
+      >
+        {Array.from({ length: columns }).map((_, i) => (
+          <Skeleton key={`skeleton-table-header-${i}`} className="h-3.5 w-16" />
+        ))}
+      </div>
+      {Array.from({ length: rows }).map((_, rowIndex) => (
+        <div
+          key={`skeleton-table-row-${rowIndex}`}
+          className="grid gap-4 px-5 py-4 border-b border-line last:border-0"
+          style={gridStyle}
+          data-testid="skeleton-table-row"
+        >
+          {Array.from({ length: columns }).map((_, colIndex) => (
+            <Skeleton
+              key={`skeleton-table-cell-${rowIndex}-${colIndex}`}
+              className="h-4 w-full"
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/index.css b/src/index.css
index a76a70a..79c1439 100644
--- a/src/index.css
+++ b/src/index.css
@@ -317,6 +317,15 @@ html[data-theme="light"] {
     background-size: 200% 100%;
     animation: shimmer 1.6s ease-in-out infinite;
   }
+
+  /* Static fallback for prefers-reduced-motion (issue #962): swapped in for
+     .skeleton-shimmer via a motion-reduce: variant at the call site (see
+     Skeleton.tsx), matching the convention already used for animate-pulse
+     in WalletStatusBadge. */
+  .skeleton-shimmer-static {
+    background-color: var(--color-surface-2);
+    opacity: 0.6;
+  }
 }
 
 /* ─────────────────────────────────────────────────────────