epicenter
epicenter copied to clipboard
feat(Whispering): Adjust initial app size and page layouts.
- 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:
- Timestamp, id, title, etc
- Transcribed Text, Latest Transformation Output
- 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:
After: