Feat/title highlight box 775#780
Merged
magic-peach merged 2 commits intoMay 20, 2026
Merged
Conversation
…ap (magic-peach#776) Browser-native increment/decrement arrows on <input type='number'> fields overlap with entered values in narrow containers, making text hard to read. Fix: suppress the spinner UI using cross-browser Tailwind arbitrary-value classes: - [appearance:textfield] — Firefox - [&::-webkit-outer-spin-button]:appearance-none — Chrome/Brave/Edge/Safari - [&::-webkit-inner-spin-button]:appearance-none — Chrome/Brave/Edge/Safari Affected inputs: - TrimControl.tsx — Start (sec) and End (sec) number fields - PresetSelector.tsx — Custom Width (px) and Height (px) fields Keyboard up/down arrow key stepping still works; only the visual spinner arrows are removed, which fully resolves the overlap/readability bug. Closes magic-peach#776
The REFRAME title blended into the background without clear visual
distinction. Wrap the h1 + subtitle in a styled container to make the
brand mark prominent and immediately recognisable.
Changes to src/components/VideoEditor.tsx:
- Wrap <h1>REFRAME</h1> and its subtitle <p> in a div with:
border border-[var(--border)] — respects light / dark mode border token
border-l-4 border-l-film-600 — film-red left accent bar for brand identity
bg-[var(--surface)] — lifted surface so it reads off the page bg
rounded-xl — consistent corner radius with card system
px-5 py-3 — breathing room around the text
shadow-sm — subtle depth to separate from background
- aria-label added so screen readers announce the landmark correctly
The box reuses existing design tokens and film-600 brand colour, so it
adapts automatically to light, dark and high-contrast themes.
Closes magic-peach#775
|
@Rucha0901 is attempting to deploy a commit to the magic-peach1's projects Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
|
Contributor
👋 Thanks for your PR, @Rucha0901!Welcome to Reframe — a browser-based video editor built for everyone 🎬 What happens next
Quick checklist
Useful links
Happy coding! 🎉 |
github-actions
Bot
added
level:beginner
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
magic-peach
added
gssoc:approved
jaygaikar-09
pushed a commit
to jaygaikar-09/reframe
that referenced
this pull request
May 21, 2026
* fix(ui): hide number input spinners to prevent value visibility overlap (magic-peach#776) Browser-native increment/decrement arrows on <input type='number'> fields overlap with entered values in narrow containers, making text hard to read. Fix: suppress the spinner UI using cross-browser Tailwind arbitrary-value classes: - [appearance:textfield] — Firefox - [&::-webkit-outer-spin-button]:appearance-none — Chrome/Brave/Edge/Safari - [&::-webkit-inner-spin-button]:appearance-none — Chrome/Brave/Edge/Safari Affected inputs: - TrimControl.tsx — Start (sec) and End (sec) number fields - PresetSelector.tsx — Custom Width (px) and Height (px) fields Keyboard up/down arrow key stepping still works; only the visual spinner arrows are removed, which fully resolves the overlap/readability bug. Closes magic-peach#776 * feat(ui): add highlighted box around REFRAME title (magic-peach#775) The REFRAME title blended into the background without clear visual distinction. Wrap the h1 + subtitle in a styled container to make the brand mark prominent and immediately recognisable. Changes to src/components/VideoEditor.tsx: - Wrap <h1>REFRAME</h1> and its subtitle <p> in a div with: border border-[var(--border)] — respects light / dark mode border token border-l-4 border-l-film-600 — film-red left accent bar for brand identity bg-[var(--surface)] — lifted surface so it reads off the page bg rounded-xl — consistent corner radius with card system px-5 py-3 — breathing room around the text shadow-sm — subtle depth to separate from background - aria-label added so screen readers announce the landmark correctly The box reuses existing design tokens and film-600 brand colour, so it adapts automatically to light, dark and high-contrast themes. Closes magic-peach#775 Co-authored-by: Akanksha Trehun <146705736+magic-peach@users.noreply.github.com>
Ayush-kathil
pushed a commit
to Ayush-kathil/reframe
that referenced
this pull request
May 21, 2026
* fix(ui): hide number input spinners to prevent value visibility overlap (magic-peach#776) Browser-native increment/decrement arrows on <input type='number'> fields overlap with entered values in narrow containers, making text hard to read. Fix: suppress the spinner UI using cross-browser Tailwind arbitrary-value classes: - [appearance:textfield] — Firefox - [&::-webkit-outer-spin-button]:appearance-none — Chrome/Brave/Edge/Safari - [&::-webkit-inner-spin-button]:appearance-none — Chrome/Brave/Edge/Safari Affected inputs: - TrimControl.tsx — Start (sec) and End (sec) number fields - PresetSelector.tsx — Custom Width (px) and Height (px) fields Keyboard up/down arrow key stepping still works; only the visual spinner arrows are removed, which fully resolves the overlap/readability bug. Closes magic-peach#776 * feat(ui): add highlighted box around REFRAME title (magic-peach#775) The REFRAME title blended into the background without clear visual distinction. Wrap the h1 + subtitle in a styled container to make the brand mark prominent and immediately recognisable. Changes to src/components/VideoEditor.tsx: - Wrap <h1>REFRAME</h1> and its subtitle <p> in a div with: border border-[var(--border)] — respects light / dark mode border token border-l-4 border-l-film-600 — film-red left accent bar for brand identity bg-[var(--surface)] — lifted surface so it reads off the page bg rounded-xl — consistent corner radius with card system px-5 py-3 — breathing room around the text shadow-sm — subtle depth to separate from background - aria-label added so screen readers announce the landmark correctly The box reuses existing design tokens and film-600 brand colour, so it adapts automatically to light, dark and high-contrast themes. Closes magic-peach#775 Co-authored-by: Akanksha Trehun <146705736+magic-peach@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Bug Summary
Closes #775
The
REFRAMEtitle blended into the page background without clear visual distinction, appearing as plain text with no emphasis.What Changed
src/components/VideoEditor.tsxWrapped the
<h1>REFRAME</h1>and its subtitle<p>in a styled highlight container:border border-[var(--border)]border-l-4 border-l-film-600bg-[var(--surface)]rounded-xlpx-5 py-3shadow-smAn
aria-labelwas also added to the wrapper for screen reader clarity.Theme Compatibility
All classes use existing CSS design tokens (
--border,--surface,film-600), so the box adapts automatically to:Acceptance Criteria
tsc --noEmitpasses with zero errors