Skip to content

Conversation

@Leftium
Copy link
Member

@Leftium Leftium commented Aug 19, 2025

  • 1000px was selected as a happy medium between the widths of the small home page and wider remaining pages (esp. the Recordings List.)
  • 1000px was still quite narrow for the Recordings list, so at smaller breakpoints list item rows were broken up into subrows:
    1. Timestamp, id, title, etc
    2. Transcribed Text, Latest Transformation Output
    3. Audio, Action Buttons
  • Motivation: it is easier to scroll down than across; an entire row can be viewed all at once.
    • (The single row layout that requires horizontal scrolling has been preserved at wider breakpoints.)
  • To reduce visual clutter and maximize text shown, the 3rd subrow is hidden until hover
    • Mobile doesn't have hover, so the current work-around is to also show the 3rd subrow when the row is checked. The final version will investigate how to handle mobile better.
  • The current code is an experiment resulting from several iterations with OpenCode. If there is general support for the direction this PR is going, better code will be investigated (less CSS, more tailwind, less conditional rendering/boilerplate, etc)

Before:
image

After:
image

- Happy medium between small home page and other pages' large layouts.
- Even with wider initial width, the Recordings list still overflows with scrollbars.
- Split rows into sub-rows so they take less width.
- Maintain single-row behavior at wider breakpoints (even if it causes horizontal scrolling)
@braden-w braden-w force-pushed the main branch 2 times, most recently from 24151c8 to 593ca24 Compare September 3, 2025 16:40
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