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

* v0.6.29: login improvements, posthog telemetry (#4026)

* feat(posthog): Add tracking on mothership abort (#4023)

Co-authored-by: Theodore Li <theo@sim.ai>

* fix(login): fix captcha headers for manual login  (#4025)

* fix(signup): fix turnstile key loading

* fix(login): fix captcha header passing

* Catch user already exists, remove login form captcha

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

The ShortInput component uses a transparent input layer beneath a
formatted overlay. When users selected text and scrolled horizontally,
the browser's ::selection pseudo-element overrode `color: transparent`,
making raw unformatted text visible and causing visual collision with
the overlay.

Adding `selection:text-transparent` keeps the input text invisible
under selection, while the overlay continues to display the correctly
formatted highlighted text.

Fixes #3389

Co-Authored-By: Octopus <liyuan851277048@icloud.com>

---------

Co-authored-by: Waleed <walif6@gmail.com>
Co-authored-by: Theodore Li <theodoreqili@gmail.com>
Co-authored-by: Siddharth Ganesan <33737564+Sg312@users.noreply.github.com>
Co-authored-by: Vikhyath Mondreti <vikhyathvikku@gmail.com>
Co-authored-by: Theodore Li <theo@sim.ai>
Co-authored-by: octo-patch <octo-patch@github.com>
This commit is contained in:
Octopus
2026-04-28 10:57:16 -07:00
committed by GitHub
co-authored by Waleed Theodore Li Siddharth Ganesan Vikhyath Mondreti Theodore Li octo-patch
parent c400e59ea6
commit 3afcad2189
@@ -347,7 +347,7 @@ export const ShortInput = memo(function ShortInput({
<>
<Input
ref={ref as React.RefObject<HTMLInputElement>}
className='allow-scroll w-full overflow-auto text-transparent caret-foreground [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-muted-foreground/50 [&::-webkit-scrollbar]:hidden'
className='allow-scroll w-full overflow-auto text-transparent selection:text-transparent caret-foreground [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-muted-foreground/50 [&::-webkit-scrollbar]:hidden'
readOnly={readOnly}
placeholder={placeholder ?? ''}
type='text'