git/metabuilder
1
0
Fork 0
mirror of https://github.com/johndoe6345789/metabuilder.git synced 2026-04-24 13:54:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(pastebin): prevent page scroll on Run, improve snippet card contrast

Browse Source 
Terminal scrollIntoView was scrolling the entire page instead of just
the terminal panel. Replaced with container.scrollTop for scoped scroll.

Snippet cards in dark mode were invisible (surface-container-low ≈
background). Added border, background, and shadow to differentiate them.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
johndoe6345789
2026-03-19 10:02:46 +00:00
parent b616451a74
commit 0e43551195
4 changed files with 27 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontends/pastebin/src/components/features/code-runner/CodeTerminal.tsx
View File

@@ -32,7 +32,13 @@ export function CodeTerminal({ language, files, entryPoint, controller }: CodeTe
const terminalEndRef = useRef<HTMLDivElement>(null)
useEffect(() => {
terminalEndRef.current?.scrollIntoView({ behavior: 'smooth' })
const el = terminalEndRef.current
if (el) {
const container = el.closest('[data-testid="terminal-output-area"]')
if (container) {
container.scrollTop = container.scrollHeight
}
}
}, [lines])
const hasErrors = lines.some((line) => line.type === 'error')

8
frontends/pastebin/src/components/features/python-runner/PythonTerminal.tsx
View File

@@ -26,7 +26,13 @@ export function PythonTerminal({ code }: PythonTerminalProps) {
const terminalEndRef = useRef<HTMLDivElement>(null)
useEffect(() => {
terminalEndRef.current?.scrollIntoView({ behavior: 'smooth' })
const el = terminalEndRef.current
if (el) {
const container = el.closest('[data-testid="terminal-output-area"]')
if (container) {
container.scrollTop = container.scrollHeight
}
}
}, [lines])
// Determine if there are any errors in the output

2
frontends/pastebin/src/components/features/snippet-display/SnippetCard.tsx
View File

@@ -142,7 +142,7 @@ export function SnippetCard({
return (
<Card
className={`group transition-all cursor-pointer${isSelected ? ` border-accent ${styles.cardSelected}` : ''}`}
className={`${styles.card} group transition-all cursor-pointer${isSelected ? ` border-accent ${styles.cardSelected}` : ''}`}
onClick={handleView}
data-testid={`snippet-card-${snippet.id}`}
role="article"

12
frontends/pastebin/src/components/features/snippet-display/snippet-card.module.scss
View File

@@ -14,6 +14,18 @@
gap: 12px;
}
.card {
border: 1px solid var(--mat-sys-outline-variant);
background-color: var(--mat-sys-surface-container);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
transition: box-shadow 200ms ease, border-color 200ms ease;
&:hover {
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
border-color: var(--mat-sys-outline);
}
}
.cardSelected {
border-color: var(--mat-sys-primary);
outline: 2px solid color-mix(in srgb, var(--mat-sys-primary) 20%, transparent);