fix(short-input): hide selected text to prevent overlay collision

[octo-patch]

Summary

Fixes #3389

When users selected text in a ShortInput field and scrolled horizontally, the transparent input text became visible, creating a visual collision with the formatted overlay.

Root cause: ShortInput renders text as color: transparent to hide the raw input beneath a formatted overlay div. However, the browser's ::selection pseudo-element overrides color, so during text selection the transparent text becomes visible and "bleeds through" the overlay.

Fix: Add selection:text-transparent to the input's class list. This sets ::selection { color: transparent }, keeping the input text invisible even when selected, while the overlay continues to display the correctly formatted and highlighted text.

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Changes

• apps/sim/app/workspace/.../short-input/short-input.tsx: Added selection:text-transparent Tailwind class to the <Input> element.

Testing

1. Add a block to the workflow (e.g. Webhook trigger)
2. Open the panel and find any short-input field
3. Type text longer than the field width
4. Click and drag to select all the text, then scroll right
5. Before fix: Raw unformatted text bleeds through the overlay
6. After fix: Only the formatted overlay text is visible; no collision occurs

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Apr 28, 2026 3:49am

[cursor]

PR Summary

Low Risk
Low risk: a single Tailwind class change to ShortInput styling to prevent selected text from showing through the formatted overlay; no logic or data flow changes.

Overview
Fixes a visual bug in ShortInput where selected text could become visible and overlap the formatted overlay during horizontal scrolling.

This updates the input styling to also make ::selection text transparent via selection:text-transparent, keeping the raw input consistently hidden.

^{Reviewed by Cursor Bugbot for commit 9c8e51e. Bugbot is set up for automated code reviews on this repo. Configure here.}

[greptile-apps]

Greptile Summary

This PR fixes a visual bug in ShortInput where selecting text caused the raw (transparent) input characters to become visible and overlay the formatted display div, because the browser's ::selection pseudo-element overrides color. The one-line fix adds selection:text-transparent to keep the input text invisible during selection. The change is correct, minimal, and well-scoped to the component's existing pattern of using text-transparent plus an absolute overlay.

Confidence Score: 5/5

Safe to merge — single-line, non-breaking CSS fix with no logic changes.

The change is a one-line Tailwind class addition that directly addresses the described bug without touching any logic, state, or APIs. The fix correctly targets the ::selection pseudo-element and is consistent with the existing text-transparent pattern already in the component. No regressions are plausible.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx	Adds selection:text-transparent Tailwind class to the hidden input so browser ::selection no longer overrides color: transparent, preventing raw text from bleeding through the formatted overlay on horizontal scroll.

Sequence Diagram

sequenceDiagram
    participant U as User
    participant I as Input (text-transparent)
    participant O as Overlay div (formatted text)

    U->>I: Types text
    I->>O: Sync scroll position (handleScroll)
    O->>U: Renders formatted/highlighted text

    Note over U,I: User selects text + scrolls
    I-->>U: Before fix — ::selection overrides color, raw text bleeds through overlay
    I-->>U: After fix — selection:text-transparent keeps color transparent during selection

Loading

_{Reviews (1): Last reviewed commit: "fix(short-input): hide selected text to ..." | Re-trigger Greptile}

[gitguardian]

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

Since your pull request originates from a forked repository, GitGuardian is not able to associate the secrets uncovered with secret incidents on your GitGuardian dashboard.
Skipping this check run and merging your pull request will create secret incidents on your GitGuardian dashboard.

🔎 Detected hardcoded secret in your pull request

GitGuardian id	GitGuardian status	Secret	Commit	Filename
29606901	Triggered	Generic High Entropy Secret	a54dcbe	apps/sim/providers/utils.test.ts	View secret

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code.
2. Replace and store your secret safely. Learn here the best practices.
3. Revoke and rotate this secret.
4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

• following these best practices for managing and storing secrets including API keys and other credentials
• install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

---

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}

[waleedlatif1]

@octo-patch please rebase against origin staging. Thanks for the contribution!