Git/mgeeky-decode-spam-headers
1
0
Fork 0
mirror of https://github.com/mgeeky/decode-spam-headers.git synced 2026-02-22 13:33:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

MAESTRO: improve responsive wrapping and layout

Browse Source
This commit is contained in:
Mariusz Banach
2026-02-18 04:53:02 +01:00
parent cfb945e1c4
commit af339e784e
10 changed files with 70 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/__tests__/report/HopChainVisualisation.test.tsx
View File

@@ -88,4 +88,16 @@ describe("HopChainVisualisation", () => {
expect(connectors.length).toBe(hopChain.length - 1);
});
it("adds wrapping classes for long hostnames and IPs", () => {
const { container } = render(<HopChainVisualisation hopChain={hopChain} />);
const firstHop = getByTestId(container, "hop-chain-node-0");
const spanNodes = Array.from(firstHop.querySelectorAll("span"));
const hostnameNode = spanNodes.find((node) => node.textContent === "mail.sender.example");
const ipNode = spanNodes.find((node) => node.textContent === "192.0.2.10");
expect(hostnameNode?.className ?? "").toContain("break-words");
expect(ipNode?.className ?? "").toContain("break-all");
});
});

21
frontend/src/__tests__/report/TestResultCard.test.tsx
View File

@@ -127,4 +127,25 @@ describe("TestResultCard", () => {
const errorIndicator = getByTestId(container, `test-result-error-${result.testId}`);
expect(errorIndicator.textContent ?? "").toMatch(/SpamAssassin database timeout/);
});
it("adds wrapping classes for long header values", () => {
const result = buildResult({
testId: 505,
headerValue: "X".repeat(200),
});
const { container } = render(<TestResultCard result={result} />);
const details = container.querySelector(`#test-result-details-${result.testId}`);
if (!details) {
throw new Error("Expected test details container to be rendered.");
}
const headerValue = details.querySelector("span.font-mono");
if (!headerValue) {
throw new Error("Expected header value to be rendered.");
}
expect(headerValue.className).toContain("break-words");
expect(headerValue.className).toContain("whitespace-pre-wrap");
});
});

4
frontend/src/components/AnalysisControls.tsx
View File

@@ -59,7 +59,7 @@ export default function AnalysisControls({ config, onChange }: AnalysisControlsP
<span className="font-mono text-[10px] text-text/50">US2</span>
</div>
<div className="mt-4 grid gap-3 sm:grid-cols-2">
<div className="flex items-center justify-between gap-4 rounded-xl border border-info/10 bg-background/40 p-4">
<div className="flex flex-col items-start gap-3 rounded-xl border border-info/10 bg-background/40 p-4 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-start gap-3">
<div className="mt-1 rounded-full border border-info/20 bg-background/60 p-2 text-xs text-info/80">
<FontAwesomeIcon icon={faGlobe} />
@@ -83,7 +83,7 @@ export default function AnalysisControls({ config, onChange }: AnalysisControlsP
{resolvedConfig.resolve ? "On" : "Off"}
</button>
</div>
<div className="flex items-center justify-between gap-4 rounded-xl border border-info/10 bg-background/40 p-4">
<div className="flex flex-col items-start gap-3 rounded-xl border border-info/10 bg-background/40 p-4 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-start gap-3">
<div className="mt-1 rounded-full border border-info/20 bg-background/60 p-2 text-xs text-info/80">
<FontAwesomeIcon icon={faCode} />

12
frontend/src/components/AnalysisResults.tsx
View File

@@ -52,9 +52,11 @@ export default function AnalysisResults({ report }: AnalysisResultsProps) {
className="rounded-2xl border border-info/10 bg-background/40 p-4"
>
<div className="flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-col">
<span className="text-sm font-semibold text-text/90">{result.testName}</span>
<span className="text-xs text-text/50">
<div className="min-w-0 flex flex-col">
<span className="break-words text-sm font-semibold text-text/90">
{result.testName}
</span>
<span className="break-words text-xs text-text/50">
Test #{result.testId} · {result.headerName}
</span>
</div>
@@ -69,10 +71,10 @@ export default function AnalysisResults({ report }: AnalysisResultsProps) {
</div>
{result.analysis ? (
<p className="mt-3 text-sm text-text/70">{result.analysis}</p>
<p className="mt-3 break-words text-sm text-text/70">{result.analysis}</p>
) : null}
{result.description ? (
<p className="mt-1 text-xs text-text/50">{result.description}</p>
<p className="mt-1 break-words text-xs text-text/50">{result.description}</p>
) : null}
{result.status === "error" ? (

7
frontend/src/components/ProgressIndicator.tsx
View File

@@ -142,7 +142,10 @@ export default function ProgressIndicator({
<div className="mt-4 space-y-3">
<div className="flex flex-wrap items-center justify-between gap-2">
<span data-testid="progress-current-test" className="text-sm font-semibold text-text/80">
<span
data-testid="progress-current-test"
className="break-words text-sm font-semibold text-text/80"
>
{progress?.currentTest ?? "Preparing analysis"}
</span>
<span data-testid="progress-percentage" className="text-sm font-semibold text-text/70">
@@ -170,7 +173,7 @@ export default function ProgressIndicator({
>
<p className="font-semibold text-spam">Timeout reached at {timeoutSeconds} seconds.</p>
<p className="mt-2 text-text/70">Incomplete tests:</p>
<p data-testid="timeout-tests" className="mt-1 font-mono text-text/70">
<p data-testid="timeout-tests" className="mt-1 break-words font-mono text-text/70">
{incompleteTests.length > 0 ? incompleteTests.join(", ") : "None"}
</p>
</div>

12
frontend/src/components/report/HopChainVisualisation.tsx
View File

@@ -47,22 +47,24 @@ export default function HopChainVisualisation({ hopChain }: HopChainVisualisatio
<span className="flex h-10 w-10 items-center justify-center rounded-xl border border-info/20 bg-info/10 text-info">
<FontAwesomeIcon icon={faServer} />
</span>
<div className="flex-1">
<div className="min-w-0 flex-1">
<div className="flex flex-wrap items-baseline gap-2">
<span className="text-sm font-semibold text-text/90">{node.hostname}</span>
<span className="break-words text-sm font-semibold text-text/90">
{node.hostname}
</span>
{node.ip ? (
<span className="font-mono text-xs text-text/60">{node.ip}</span>
<span className="break-all font-mono text-xs text-text/60">{node.ip}</span>
) : null}
</div>
<div className="mt-2 flex flex-wrap gap-4 text-xs text-text/60">
{node.timestamp ? (
<span className="flex items-center gap-2">
<span className="flex items-center gap-2 break-words">
<FontAwesomeIcon icon={faClock} className="text-[10px]" />
{node.timestamp}
</span>
) : null}
{node.serverInfo ? (
<span className="flex items-center gap-2">
<span className="flex items-center gap-2 break-words">
<FontAwesomeIcon icon={faNetworkWired} className="text-[10px]" />
{node.serverInfo}
</span>

6
frontend/src/components/report/ReportSearchBar.tsx
View File

@@ -40,14 +40,14 @@ export default function ReportSearchBar({
className="rounded-2xl border border-info/10 bg-surface/50 p-4 shadow-[0_0_30px_rgba(15,23,42,0.18)]"
>
<div className="flex flex-wrap items-center gap-3">
<label className="flex flex-1 items-center gap-2 rounded-full border border-info/20 bg-background/40 px-3 py-2 text-sm text-text/70 focus-within:border-info/40 focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-info">
<label className="flex min-w-0 flex-1 items-center gap-2 rounded-full border border-info/20 bg-background/40 px-3 py-2 text-sm text-text/70 focus-within:border-info/40 focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-info">
<FontAwesomeIcon icon={faMagnifyingGlass} className="text-xs text-text/60" />
<input
type="text"
value={query}
onInput={handleInput}
onKeyDown={handleKeyDown}
className="flex-1 bg-transparent text-xs text-text/80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info"
className="min-w-0 flex-1 bg-transparent text-xs text-text/80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info"
placeholder="Search test names, headers, or analysis"
data-testid="report-search-input"
aria-label="Search report results"
@@ -77,7 +77,7 @@ export default function ReportSearchBar({
<div className="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-text/50">
<span>{hasQuery ? "Matches for" : "Showing all results"}</span>
{hasQuery ? (
<span className="rounded-full border border-accent/30 bg-accent/10 px-2 py-0.5 font-mono text-[10px] text-accent">
<span className="max-w-full break-words rounded-full border border-accent/30 bg-accent/10 px-2 py-0.5 font-mono text-[10px] text-accent">
{query}
</span>
) : null}

6
frontend/src/components/report/SecurityAppliancesSummary.tsx
View File

@@ -35,11 +35,11 @@ export default function SecurityAppliancesSummary({ appliances }: SecurityApplia
<div
key={`${appliance.vendor}-${appliance.name}`}
data-testid={`security-appliance-${index}`}
className="inline-flex items-center gap-2 rounded-full border border-info/20 bg-background/40 px-3 py-1 text-xs text-text/70"
className="inline-flex max-w-full flex-wrap items-center gap-2 rounded-full border border-info/20 bg-background/40 px-3 py-1 text-xs text-text/70"
>
<FontAwesomeIcon icon={faShield} className="text-[10px] text-info" />
<span className="font-semibold">{appliance.vendor}</span>
<span className="text-text/50">{appliance.name}</span>
<span className="break-words font-semibold">{appliance.vendor}</span>
<span className="break-words text-text/50">{appliance.name}</span>
</div>
))}
</div>

16
frontend/src/components/report/TestResultCard.tsx
View File

@@ -101,10 +101,10 @@ export default function TestResultCard({ result, highlightQuery = "" }: TestResu
aria-controls={detailsId}
onClick={toggle}
onKeyDown={handleKeyDown}
className="flex w-full items-center justify-between gap-4 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info"
className="flex w-full flex-wrap items-center justify-between gap-4 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info"
>
<div className="flex flex-col">
<span className="text-sm font-semibold text-text/90">
<div className="min-w-0 flex flex-col">
<span className="break-words text-sm font-semibold text-text/90">
{highlightText(result.testName, highlightQuery)}
</span>
<span className="text-xs text-text/50">Test #{result.testId}</span>
@@ -136,19 +136,21 @@ export default function TestResultCard({ result, highlightQuery = "" }: TestResu
<div className="rounded-xl border border-info/10 bg-background/40 p-3">
<div className="flex flex-col gap-1">
<span className="text-[10px] uppercase tracking-[0.2em] text-text/60">Header</span>
<span className="text-xs text-text/60">
<span className="break-words text-xs text-text/60">
{highlightText(result.headerName, highlightQuery)}
</span>
<span className="font-mono text-sm text-text/80">{result.headerValue}</span>
<span className="break-words whitespace-pre-wrap font-mono text-sm text-text/80">
{result.headerValue}
</span>
</div>
{result.analysis ? (
<p className="mt-3 text-sm text-text/70">
<p className="mt-3 break-words text-sm text-text/70">
{highlightText(result.analysis, highlightQuery)}
</p>
) : null}
{result.description ? (
<p className="mt-1 text-xs text-text/50">{result.description}</p>
<p className="mt-1 break-words text-xs text-text/50">{result.description}</p>
) : null}
{result.status === "error" ? (