Skip to content

Add terminal preview panel, fix layout issues, add favicon - #10

Open
utsengar wants to merge 1 commit into
mainfrom
terminal-preview-and-favicon
Open

Add terminal preview panel, fix layout issues, add favicon#10
utsengar wants to merge 1 commit into
mainfrom
terminal-preview-and-favicon

Conversation

@utsengar

Copy link
Copy Markdown
Collaborator

Summary

  • Adds a generic TerminalWorkspace type + TerminalPreview component: a small, terminal-styled reference panel for coding-challenge patterns that shows the run/test commands a candidate should use. CodeFlow itself never knows what language or toolchain a problem uses — it just displays whatever commands the problem declares (e.g. ./run.sh, ./test.sh). This is a static, copyable reference, not a live shell.
  • Fixes a handful of UI issues found while building this (see below).
  • Adds a proper favicon (SVG primary, PNG/ICO fallbacks, web manifest) — the app previously referenced a favicon.ico that didn't exist.

UI fixes

  • Duplicate instructions: coding-challenge patterns no longer show a redundant internal instructions overlay when the sidebar already displays the same content permanently — previously the only way past it was pressing Escape.
  • Homepage grid touching viewport edges: the challenge card grid had no horizontal padding, so cards sat flush against the browser edge below ~1280px width. Added responsive padding; the two intro cards now also stack on narrow screens instead of squeezing side by side.
  • Clipped instructions text: long paragraphs in the instructions sidebar were getting cut off mid-line instead of wrapping. Root cause: Radix ScrollArea wraps its children in an internal display: table div (to measure scroll size) that sizes to unwrapped intrinsic width instead of the space actually available. Added a targeted CSS override to force it back to a normal block box.
  • Tab bar alignment: the instructions tab row had no horizontal padding, so it sat flush left, misaligned with both the content below it and the header above it.
  • Inconsistent card button widths: challenge cards with different amounts of content (tags, instruction count) rendered their "Launch challenge" buttons at different widths. Cards now explicitly stretch to fill their grid cell and content areas grow to push footers to a consistent position.

Test plan

  • tsc --noEmit passes clean
  • npm start, confirm the homepage grid has consistent padding at various viewport widths
  • Open a coding-challenge pattern, confirm no duplicate instructions overlay and the terminal preview panel renders correctly
  • Confirm browser tab shows the new favicon

🤖 Generated with Claude Code

Adds a TerminalWorkspace type + TerminalPreview component: a small,
terminal-styled reference panel for coding-challenge patterns that shows
the run/test commands a candidate should use, without CodeFlow ever
needing to know what language or toolchain a problem uses.

Also fixes several UI issues found while building this:
- Coding-challenge patterns no longer show a redundant internal
  instructions overlay when the sidebar already displays it permanently.
- Homepage challenge grid had no horizontal padding, so cards touched the
  viewport edge below ~1280px; added responsive padding and made the intro
  cards stack on narrow screens.
- Long paragraphs in the instructions sidebar were getting clipped instead
  of wrapping, caused by Radix ScrollArea's internal `display: table`
  content wrapper sizing to unwrapped intrinsic width; added a targeted
  override.
- Instructions tab bar had no horizontal padding, misaligning it against
  the content below and the header above.
- Challenge cards had inconsistent button widths across cards with
  different amounts of content; cards now stretch to fill their grid
  cell and footers align consistently.

Adds a proper favicon (SVG primary + PNG/ICO fallbacks + manifest) so the
browser tab has real branding instead of a broken default icon reference.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant