App mode mobile redesign (#9047)

Reworks the app mode display for mobile devices. Adds multiple bottom
tabs that can be swiped between.


![AnimateDiff_00005](https://github.com/user-attachments/assets/e1c928ff-dd52-4f4c-83a6-c351c4711e62)

To be handled in followup PRs
- Nicer error display
- Support for even smaller screens
- UX improvements for the 'Outputs' pane
  - Was postponed to minimize conflicts with non-mobile development.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9047-App-mode-mobile-redesign-30e6d73d365081388e4adea4df886522)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
AustinMroz
2026-03-03 14:18:19 -08:00
committed by GitHub
parent 68b16e3a3f
commit fe8ab1d896
12 changed files with 482 additions and 246 deletions

View File

@@ -81,7 +81,7 @@ const assetItems = computed<AssetGridItem[]>(() =>
const gridStyle = {
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
gridTemplateColumns: 'repeat(auto-fill, minmax(min(200px, 30vw), 1fr))',
padding: '0 0.5rem',
gap: '0.5rem'
}