Skip to content

change copy prompt button hover to underline #330

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
masnwilliams merged 3 commits into from
Apr 15, 2026
+4 −5
Merged

change copy prompt button hover to underline #330

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f5e30a8
change copy prompt button hover from bg color to underline
masnwilliams Apr 15, 2026
6e3f46a
add static placeholder for copy prompt button to prevent late loading…
masnwilliams Apr 15, 2026
41d71e8
Revert "add static placeholder for copy prompt button to prevent late…
masnwilliams Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,13 @@ import { CopyPromptButton } from '/snippets/copy-prompt-button.jsx';
copy and paste this into your AI coding agent (Cursor, Claude, Windsurf, etc.). it installs the Kernel CLI and skills, authenticates you, and opens a live browser session that you or your agent can interact with.
</p>
<div>
<div className="copy-prompt-placeholder">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="5.5" y="5.5" width="8" height="8" rx="1.5" />
<path d="M10.5 5.5V3.5C10.5 2.67 9.83 2 9 2H3.5C2.67 2 2 2.67 2 3.5V9C2 9.83 2.67 10.5 3.5 10.5H5.5" />
</svg>
copy prompt
</div>
<CopyPromptButton />
</div>
</div>
Expand Down
16 changes: 10 additions & 6 deletions snippets/copy-prompt-button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
const { useState, useCallback } = React;
const { useState, useCallback, useLayoutEffect } = React;

export const CopyPromptButton = () => {
const [copied, setCopied] = useState(false);

useLayoutEffect(() => {
const placeholder = document.querySelector('.copy-prompt-placeholder');
if (placeholder) placeholder.style.display = 'none';
}, []);

const prompt = `# Setup Kernel

## Prerequisites
Expand Down Expand Up @@ -68,16 +73,15 @@ export const CopyPromptButton = () => {
backgroundColor: '#111',
border: '1px solid rgba(255, 255, 255, 0.08)',
cursor: 'pointer',
transition: 'background-color 0.15s ease, border-color 0.15s ease',
textDecoration: 'none',
transition: 'text-decoration 0.15s ease',
Copy link
Copy Markdown

@cursor cursor Bot Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Transition on non-animatable text-decoration-line is ineffective

Low Severity

The transition: 'text-decoration 0.15s ease' declaration is dead code. CSS cannot transition text-decoration-line (which is what changes between none and underline). Only text-decoration-color and text-decoration-thickness are animatable sub-properties. The underline will still appear and disappear on hover, but it snaps instantly with no smooth transition, making this line misleading.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit f5e30a8. Configure here.

fontFamily: 'inherit',
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = '#222';
e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.15)';
e.currentTarget.style.textDecoration = 'underline';
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = '#111';
e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)';
e.currentTarget.style.textDecoration = 'none';
}}
>
{copied ? (
Expand Down
21 changes: 21 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,3 +178,24 @@ table tbody td:first-child {
width: 100%;
}
}

/* static placeholder for copy prompt button — visible before React hydrates */
.copy-prompt-placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
max-width: 352px;
height: 56px;
padding: 0 32px;
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: 0.01em;
color: #fff;
background-color: #111;
border: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer;
font-family: inherit;
box-sizing: border-box;
}
Copy link
Copy Markdown

@cursor cursor Bot Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Placeholder width doesn't match button's actual rendered width

Medium Severity

The new .copy-prompt-placeholder has max-width: 352px, but the actual <button> rendered by CopyPromptButton has its max-width overridden to 100% by the existing .tinker-box-content button { max-width: 100% !important; } rule. On any screen where the content area is wider than 352px, the placeholder renders at 352px while the hydrated button stretches to fill the container — causing a visible layout shift, which is exactly what the placeholder was designed to prevent.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 6e3f46a. Configure here.

Loading