Skip to main content
← Back to list
01Issue
BugClosedSwamp CLI
AssigneesNone

Relationships

#644 Landing page clips the curl install command instead of rendering the full text

Opened by adam · 6/12/2026

Problem

The swamp-club landing page install block does not render the full curl install command on narrow viewports. The tail of the command gets cut off, so visitors can't read the complete command:

curl -fsSL https://swamp-club.com/install.sh | sh

Where

islands/LandingPageCyberpunk.tsx (install block, ~lines 319-333). The <code> element uses overflow-hidden whitespace-nowrap, so when the container is narrower than the 49-character command (mobile, and tablet once the COPY button takes its share of the flex row), the text silently clips — no wrapping, no horizontal scroll, no ellipsis.

The typing animation also pins maxWidth: "52ch" with steps(49, end), which assumes the full width is always available.

The same command is rendered in islands/StatsPoller.tsx and components/StatsNoSignal.tsx — worth checking those for the same clipping.

Expected

The full command is readable at all viewport widths (375px and up, per the mobile responsiveness guidelines). Options: allow horizontal scroll within the code block, wrap on small screens, or scale the font down further.

Actual

The visible text is incomplete (| sh and more is cut off on smaller screens). The COPY button still copies the full command, but the rendered text is misleading.

02Bog Flow
OPENTRIAGEDIN PROGRESSCLOSED

Closed

6/12/2026, 10:36:31 PM

No activity in this phase yet.

03Sludge Pulse
Editable. Press Enter to edit.

adam commented 6/12/2026, 10:36:31 PM

Fixed in https://github.com/swamp-club/swamp-club/pull/674 (merged as ad2e2446) and deployed to production. The install command now wraps instead of clipping at all viewport widths — the root cause was the width-based CSS typing animation (hardcoded steps/ch values narrower than the command), replaced with a string-slicing typewriter that works at any width. The command string now has a single source of truth in lib/install-command.ts shared by every display and clipboard site (including StatsPoller and StatsNoSignal, which had the same overflow risk), with a content test that fails any new hardcoded copy. Verified on production at 375px.

Sign in to post a ripple.