fix: restore readable entity content widths - #2017
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Restores a readable default entity/content column width while introducing an explicit wider “with-sidebar” layout that is only applied on pages that actually render an in-page right rail (community calls on space home).
Changes:
- Introduces explicit entity-page layout tokens (cover/content/with-sidebar widths) and updates shared containers to use semantic variants.
- Adds
EntityPageSidebarLayoutand updates Space home to opt into the wider layout only when community-call series exist (with server-side memoization viareact.cache). - Adds focused regression tests for the container variants and sidebar opt-in behavior.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| docs/plans/2026-07-17-fix-content-width-sidebar-layout-plan.md | Documents the rationale, breakpoints, and implementation plan for restoring readable widths and adding an opt-in sidebar shell. |
| apps/web/partials/entity-page/entity-page-sidebar-layout.tsx | Adds a small wrapper that chooses the EntityPageContentContainer variant based on whether a sidebar node is present. |
| apps/web/partials/entity-page/entity-page-layout.ts | Centralizes layout width constants and the semantic EntityPageContentVariant type. |
| apps/web/partials/entity-page/entity-page-content-container.tsx | Switches from a single derived max width to semantic variants with desktop-first breakpoint fallback. |
| apps/web/partials/entity-page/entity-page-content-container.test.tsx | Adds regression tests for default vs with-sidebar widths and sidebar opt-in behavior. |
| apps/web/partials/entity-page/editable-entity-cover-avatar-header.tsx | Decouples avatar/content alignment from cover geometry; aligns avatar to the readable content column. |
| apps/web/partials/community-calls/community-call-recording.tsx | Aligns recording layout width with the new readable content token. |
| apps/web/core/community-calls/fetch-community-calls.ts | Wraps fetchCommunityCalls in react.cache to avoid duplicate per-request fetches across layout/page. |
| apps/web/app/space/[id]/(space)/page.tsx | Uses EntityPageSidebarLayout and resolves community calls before choosing layout to avoid post-render width shifts. |
| apps/web/app/space/[id]/(space)/layout.tsx | Opts the space header/tabs container into the wide variant only when community calls exist, matching the page body. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
b-d055
left a comment
b-d055
left a comment
There was a problem hiding this comment.
@jwalkingjew see comments (you also need to resolve conflicts)
| const [props, communityCalls] = await Promise.all([getSpaceFrontPage(spaceId), fetchCommunityCalls(spaceId)]); | ||
|
|
||
| const typeIds = props.space?.entity?.types?.map(t => t.id) ?? []; | ||
| const contentVariant = communityCalls.length > 0 ? 'with-sidebar' : 'content'; |
There was a problem hiding this comment.
This layout wraps all six space routes, so on a space with community calls the header and tabs render at 1142px on every tab, but only the home page's body opts into that width. Activity, claims, community, governance, debates, and TopicEntityBody all stay at the 900px default, so the header ends up noticeably wider than the content under it on those pages.
Might be worth scoping the variant decision to the home route instead of the shared layout?
Example, at a sceen size above ~1400px look at
https://geogenesis-git-codex-content-width-layout-plan-geo-browser.vercel.app/space/4582fbbee28a16589154f7e36f1ee3c5
vs
https://geogenesis-git-codex-content-width-layout-plan-geo-browser.vercel.app/space/c9f267dcb0d270718c2a3c45a64afd32
notice the width difference?
There was a problem hiding this comment.
Addressed in 8512cc2. The shared header now uses the with-sidebar width only on the exact space home route and only when that home page will actually render the community-call rail. Nested space routes retain the standard content width. I also added regression coverage for the home route, a nested route, no-sidebar behavior, and the debate chrome gate.
| } | ||
|
|
||
| const props = await getSpaceFrontPage(spaceId); | ||
| const [props, communityCalls] = await Promise.all([getSpaceFrontPage(spaceId), fetchCommunityCalls(spaceId)]); |
There was a problem hiding this comment.
Moving this fetch out of the home page (where it was inside <Suspense>) and into the layout means a failure here now takes down every space route instead of just the home page. There's no error.tsx under app/space/, so it goes all the way up to the root error boundary.
Adding .catch(() => []) here and at page.tsx:80 would degrade to "no rail" instead, which is how fetchCommunityCallsForExplore already handles it.
There was a problem hiding this comment.
Addressed in 8512cc2. Both layout.tsx and page.tsx now catch fetchCommunityCalls failures and fall back to an empty list, so the route degrades to no rail instead of reaching the root error boundary. The focused tests and TypeScript check pass.
…-layout-plan # Conflicts: # apps/web/app/space/[id]/(space)/layout.tsx
Summary
with-sidebarlayout that falls back to 900px when the rail hides at the 1023px breakpointWhy
The community-calls work coupled the shared
EntityPageContentContainerwidth to cover geometry, widening it from the historical 880px to 1144px so one custom right rail would fit. Because that container is shared, articles, posts, profiles, space headers, governance, claims, activity, imports, and side-panel entity content all inherited an overly wide reading measure.This change makes readable content the default again and requires sidebar pages to opt into their wider shell.
User impact
Content-heavy pages return to a readable line length. Space homes with community calls still have room for their right rail, while spaces without calls do not reserve an empty sidebar or change width after rendering.
Validation
bun run test partials/entity-page/entity-page-content-container.test.tsx— 4 passedbunx tsc --noEmitfromapps/web— passedbun run lint— passed with existing repository warningsbunx prettier --check ...on changed files — passedpackages/authexiting when no test files are found@geogenesis/auth, then stalled in Next/Turbopack after inferring the workspace root above the repo from an outerpackage-lock.json; it was interrupted after 4m48s with no application errorReview focus
Please compare the proposed 900px normal content width and 1142px sidebar shell in the deploy preview, especially navigation between a long article/post and a space home with community calls.