Feed browser: Desktop bento layout #3

2026-10-19T22:08:31-06:00

calcazar commented

2026-10-19 22:08:31 -06:00

Milestone branch for Feed browser: Desktop bento layout. Later tasks in this milestone add commits here.

rnxcmkidd: Viewport-fit bento shell where only the feed scrolls

.app root (container: app / inline-size, 100vh/100dvh, overflow hidden) with a .bento grid child: 272 | 1fr | 324 at 1181px+, 244 | 1fr | 292 at 1001-1180px, 14px gaps and padding. Container queries only (src/styles/layout.css).
The body never scrolls. The feed list, Find experts results and Trending list scroll inside their panels with faded top and bottom edges. The infinite-scroll observer now uses the feed list as its root, and the new-posts pill scrolls the list (not the window) to the top.
Account panel: logo, MINNECT wordmark, theme toggle (useTheme), hex avatar, name, email, "Feed updates live" with a pulsing crimson dot.
Panels use --r-panel (18px) and tokens; new --shadow-tile token for both themes. Replaced legacy rules removed from legacy.css (old header, columns, 959px media queries, details/summary search).
Below 1001px a single-column fallback keeps everything usable until the tablet and phone tasks land.
Dev-only /dev/feed preview (404 in production) renders the real shell with fixtures from src/dev/fixtures.ts, no network calls.

Verified

tsc --noEmit, eslint, vitest (181 passed), next build pass.
Playwright on /dev/feed at 1440x900 and 1100x800, dark and light: scrollingElement.scrollHeight equals the viewport height, window cannot scroll, feed list scrolls internally, search and trending lists overflow inside their panels, 18px radius, mask fade present, zero /api or external requests.

CRM task: rnxcmkidd

Milestone branch for **Feed browser: Desktop bento layout**. Later tasks in this milestone add commits here. ## rnxcmkidd: Viewport-fit bento shell where only the feed scrolls - `.app` root (`container: app / inline-size`, 100vh/100dvh, overflow hidden) with a `.bento` grid child: 272 | 1fr | 324 at 1181px+, 244 | 1fr | 292 at 1001-1180px, 14px gaps and padding. Container queries only (`src/styles/layout.css`). - The body never scrolls. The feed list, Find experts results and Trending list scroll inside their panels with faded top and bottom edges. The infinite-scroll observer now uses the feed list as its root, and the new-posts pill scrolls the list (not the window) to the top. - Account panel: logo, MINNECT wordmark, theme toggle (`useTheme`), hex avatar, name, email, "Feed updates live" with a pulsing crimson dot. - Panels use `--r-panel` (18px) and tokens; new `--shadow-tile` token for both themes. Replaced legacy rules removed from `legacy.css` (old header, columns, 959px media queries, details/summary search). - Below 1001px a single-column fallback keeps everything usable until the tablet and phone tasks land. - Dev-only `/dev/feed` preview (404 in production) renders the real shell with fixtures from `src/dev/fixtures.ts`, no network calls. ## Verified - `tsc --noEmit`, eslint, vitest (181 passed), `next build` pass. - Playwright on /dev/feed at 1440x900 and 1100x800, dark and light: scrollingElement.scrollHeight equals the viewport height, window cannot scroll, feed list scrolls internally, search and trending lists overflow inside their panels, 18px radius, mask fade present, zero /api or external requests. CRM task: rnxcmkidd

calcazar added 1 commit 2026-10-19 22:08:31 -06:00

rnxcmkidd: Add the viewport-fit bento shell and a dev feed preview with fixtures 89064e88c1

calcazar added 1 commit 2026-10-19 22:13:30 -06:00

8zbhzr21j: Restyle post cards, comments and the own-post menu to the redesign spec 11e4ec561b

calcazar added 1 commit 2026-10-19 22:14:19 -06:00

8zbhzr21j: Read the video duration from videoDuration and test its m:ss format 7321acdde6

calcazar added 1 commit 2026-10-19 22:19:58 -06:00

icknpcyaf: Redesign the composer with toolbar, emoji popover, attachment row and flip Post f250cdf09c

calcazar added 1 commit 2026-10-19 22:24:40 -06:00

h8r4npp3p: Add the new-posts pill, feed list motion and app-wide reduced-motion switch-off 5e391ae678

calcazar added 1 commit 2026-10-19 22:30:17 -06:00

vzxipsule: Replace the featured rail with an auto-rotating FeaturedCarousel ce1a3e2eaa