fix(ui): action-button result toast wraps instead of overflowing viewport

Tester: the result toast under the EOL Check / Exploit Intel / M365 CVEs
buttons ("30 assets, 4203 packages checked …") was cut off the left edge
at 100% browser zoom (only visible at 75%).

It was absolute right-0 + whitespace-nowrap, so the long single line grew
leftward past the viewport edge when the button sits on the left of the
toolbar. Switched to whitespace-normal + fixed w-60 so it wraps to a few
lines and stays on-screen.
This commit is contained in:
2026-06-03 15:31:51 +02:00
parent 1fb49e4336
commit 033f39f0bb
+3 -3
View File
@@ -90,7 +90,7 @@ function ExploitIntelButton({ onDone }: { onDone: () => void }) {
<>💥 Exploit Intel</>
)}
{result && !busy && (
<span className="absolute top-full right-0 mt-1 z-30 whitespace-nowrap rounded-md bg-red-50 border border-red-200 px-2 py-1 text-[10px] text-red-800 shadow-sm">
<span className="absolute top-full right-0 mt-1 z-30 whitespace-normal w-60 rounded-md bg-red-50 border border-red-200 px-2 py-1 text-[10px] text-red-800 shadow-sm">
{result}
</span>
)}
@@ -139,7 +139,7 @@ function EolCheckButton({ onDone }: { onDone: () => void }) {
<> EOL Check</>
)}
{result && !busy && (
<span className="absolute top-full right-0 mt-1 z-30 whitespace-nowrap rounded-md bg-purple-50 border border-purple-200 px-2 py-1 text-[10px] text-purple-800 shadow-sm">
<span className="absolute top-full right-0 mt-1 z-30 whitespace-normal w-60 rounded-md bg-purple-50 border border-purple-200 px-2 py-1 text-[10px] text-purple-800 shadow-sm">
{result}
</span>
)}
@@ -191,7 +191,7 @@ function M365CheckButton({ onDone }: { onDone: () => void }) {
<>📅 M365 CVEs</>
)}
{result && !busy && (
<span className="absolute top-full right-0 mt-1 z-30 whitespace-nowrap rounded-md bg-blue-50 border border-blue-200 px-2 py-1 text-[10px] text-blue-800 shadow-sm">
<span className="absolute top-full right-0 mt-1 z-30 whitespace-normal w-60 rounded-md bg-blue-50 border border-blue-200 px-2 py-1 text-[10px] text-blue-800 shadow-sm">
{result}
</span>
)}