From fe36d47e248aa4d46007b6ad0b8528a049ea90f5 Mon Sep 17 00:00:00 2001
From: thefadah <152818509+thefadah@users.noreply.github.com>
Date: Sun, 18 Oct 2026 09:24:29 +0100
Subject: [PATCH] feat: compact 320px output layout, responsive footer, shared
tokens, and reset behavior
- Add compact command output layout for 320-pixel mobile screens (fixes #194)
- Add responsive multi-column footer layout with wrapping columns (fixes #195)
- Add shared CSS custom property tokens for surface and border colors (fixes #197)
- Add reset behavior after customized inputs with component tests (fixes #205)
- Update README documentation
---
README.md | 7 ++
src/App.test.tsx | 90 +++++++++++++++++++++++
src/App.tsx | 36 ++++++++-
src/styles.css | 186 ++++++++++++++++++++++++++++++++++++++++-------
4 files changed, 289 insertions(+), 30 deletions(-)
diff --git a/README.md b/README.md
index 7995ec8..89eb553 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,13 @@ A visual companion to [Soroban Testkit](https://github.com/soroban-testkit/testk
The interface does not execute contracts in the browser. Generated commands run locally through `soroban-testkit`, keeping contract tests deterministic and offline as required by the core project.
+## Features
+
+- **Shared Design Tokens**: CSS custom properties for surfaces (`--surface-base`, `--surface-elevated`, `--surface-terminal`, `--surface-output`, `--surface-card`) and borders (`--border-subtle`, `--border-default`, `--border-strong`, `--border-input`).
+- **Compact Output for 320px Screens**: Responsive mobile output layout stacking the code block and action buttons on viewports down to 320px to prevent horizontal overflow and enhance touch targets.
+- **Responsive Footer Layout**: Semantic multi-column footer with wrapping layout displaying brand description, workflow navigation links, and licensing metadata.
+- **Workflow Input Reset**: Easily reset customized command builder inputs back to standard workflow defaults via the `Reset` action.
+
## Development
```sh
diff --git a/src/App.test.tsx b/src/App.test.tsx
index 8676631..1f01719 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -63,3 +63,93 @@ describe("App command copy", () => {
expect(await screen.findByRole("button", { name: "Copied" })).toBeInTheDocument();
});
});
+
+describe("Reset behavior after customized inputs (#205)", () => {
+ it("resets coverage inputs back to defaults after customization", () => {
+ render();
+
+ const pathInput = screen.getByLabelText(/project or contract path/i) as HTMLInputElement;
+ const formatSelect = screen.getByLabelText(/report format/i) as HTMLSelectElement;
+ const openCheckbox = screen.getByLabelText(/open report when complete/i) as HTMLInputElement;
+
+ fireEvent.change(pathInput, { target: { value: "./contracts/escrow" } });
+ fireEvent.change(formatSelect, { target: { value: "lcov" } });
+ fireEvent.click(openCheckbox); // uncheck
+
+ expect(
+ screen.getByText("soroban-testkit coverage ./contracts/escrow --format lcov"),
+ ).toBeInTheDocument();
+
+ const resetButton = screen.getByRole("button", { name: "Reset" });
+ fireEvent.click(resetButton);
+
+ expect(pathInput.value).toBe(".");
+ expect(formatSelect.value).toBe("html");
+ expect(openCheckbox.checked).toBe(true);
+ expect(
+ screen.getByText("soroban-testkit coverage . --format html --open"),
+ ).toBeInTheDocument();
+ });
+
+ it("resets limits inputs back to defaults after customization", () => {
+ render();
+
+ fireEvent.click(screen.getByRole("button", { name: "limits" }));
+
+ const pathInput = screen.getByLabelText(/project or contract path/i) as HTMLInputElement;
+ const fnInput = screen.getByLabelText(/function/i) as HTMLInputElement;
+ const rampInput = screen.getByLabelText(/ramp parameter/i) as HTMLInputElement;
+
+ fireEvent.change(pathInput, { target: { value: "./custom.wasm" } });
+ fireEvent.change(fnInput, { target: { value: "custom_fn" } });
+ fireEvent.change(rampInput, { target: { value: "custom_ramp" } });
+
+ expect(
+ screen.getByText(
+ "soroban-testkit limits --contract ./custom.wasm --fn custom_fn --ramp custom_ramp",
+ ),
+ ).toBeInTheDocument();
+
+ fireEvent.click(screen.getByRole("button", { name: "Reset" }));
+
+ expect(pathInput.value).toBe(".");
+ expect(fnInput.value).toBe("batch_payout");
+ expect(rampInput.value).toBe("recipients");
+ expect(
+ screen.getByText(
+ "soroban-testkit limits --contract . --fn batch_payout --ramp recipients",
+ ),
+ ).toBeInTheDocument();
+ });
+
+ it("resets audit inputs back to defaults after customization", () => {
+ render();
+
+ fireEvent.click(screen.getByRole("button", { name: "audit" }));
+
+ const pathInput = screen.getByLabelText(/project or contract path/i) as HTMLInputElement;
+ const strictCheckbox = screen.getByLabelText(/fail on warnings/i) as HTMLInputElement;
+
+ fireEvent.change(pathInput, { target: { value: "./contracts/vault" } });
+ fireEvent.click(strictCheckbox); // uncheck strict
+
+ expect(screen.getByText("soroban-testkit audit ./contracts/vault")).toBeInTheDocument();
+
+ fireEvent.click(screen.getByRole("button", { name: "Reset" }));
+
+ expect(pathInput.value).toBe(".");
+ expect(strictCheckbox.checked).toBe(true);
+ expect(screen.getByText("soroban-testkit audit . --strict")).toBeInTheDocument();
+ });
+});
+
+describe("Responsive footer layout (#195)", () => {
+ it("renders wrapping footer columns with links and metadata", () => {
+ render();
+
+ expect(screen.getByText("Soroban Testkit", { selector: ".footer-brand" })).toBeInTheDocument();
+ expect(screen.getByText("Built for the Stellar developer ecosystem.")).toBeInTheDocument();
+ expect(screen.getByText("Apache-2.0")).toBeInTheDocument();
+ expect(screen.getByRole("link", { name: "CLI Workbench" })).toBeInTheDocument();
+ });
+});
diff --git a/src/App.tsx b/src/App.tsx
index 902695f..a34ac6f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,6 +23,15 @@ export default function App() {
[command, path, format, open, fn, ramp, strict],
);
+ const handleReset = () => {
+ setPath(".");
+ setFormat("html");
+ setOpen(true);
+ setFn("batch_payout");
+ setRamp("recipients");
+ setStrict(true);
+ };
+
const copy = async () => {
await copyToClipboard(generated);
setCopied(true);
@@ -94,11 +103,34 @@ export default function App() {
}
{command === "limits" && }
{command === "audit" && }
- {generated}
+
+
{generated}
+
+
+
+
+