feat(admin): responsive mobile layout for feed management #16

Merged

addison merged 1 commit from exe-dev-bot/kiosk:feat/mobile-admin-ux into main

2026-02-13 19:13:00 -05:00

exe-dev-bot commented

2026-02-13 07:32:26 -05:00

Contributor

Problem

The feed configuration table overflows on mobile viewports (≤640px). The table renders at 475px in a 298px container, pushing edit/delete buttons off-screen and making feed management impossible on phones.

Solution

CSS-only change that converts the 4-column table into a card-based layout on mobile:

Row 1: Color swatch + feed name + edit/delete icons
Row 2: Full-width URL (truncated with ellipsis)
Edit mode adapts with stacked layout for inputs and save/cancel buttons
Desktop layout is completely unchanged

No HTML or JS changes required — uses CSS grid to restyle the existing table elements as cards within the @media (max-width: 640px) block.

## Problem The feed configuration table overflows on mobile viewports (≤640px). The table renders at 475px in a 298px container, pushing edit/delete buttons off-screen and making feed management impossible on phones. ## Solution CSS-only change that converts the 4-column table into a card-based layout on mobile: - **Row 1:** Color swatch + feed name + edit/delete icons - **Row 2:** Full-width URL (truncated with ellipsis) - Edit mode adapts with stacked layout for inputs and save/cancel buttons - Desktop layout is completely unchanged No HTML or JS changes required — uses CSS grid to restyle the existing table elements as cards within the `@media (max-width: 640px)` block.

exe-dev-bot added 1 commit

2026-02-13 07:32:27 -05:00

feat(admin): replace feed table with card layout on mobile cf6eb1f32f

On viewports ≤640px, the feeds table is restyled as stacked cards
using CSS grid on the existing <tr>/<td> elements (no HTML or JS
changes needed).

Each card shows:
- Row 1: color swatch + feed name + edit/delete actions
- Row 2: full-width URL with ellipsis truncation

Edit mode gets a 3-row grid: color+input, URL, action buttons.

This fixes the table overflow issue where the 475px table didn't
fit in the 298px mobile container, making action buttons
inaccessible.

Co-authored-by: Shelley <shelley@exe.dev>