feat(profile): restyle the personal space profile by o-p-o-p-o · Pull Request #2514 · geobrowser/geogenesis

o-p-o-p-o · 2026-09-21T19:13:48Z

A visual pass over the personal space profile (the GEO-2859 page). Almost all of it is layout and styling, but a few shared components gain options along the way. Those are listed under Outside the profile, since they're the parts worth a closer look.

Main column

Activity keeps fix(profile): coordinate compact debate playback #2518/fix: align activity debate interactions #2525's compact playback, card widths and one-at-a-time autoplay, and restyles the header around them:
- "Activity" is a medium title, with the Debates/Claims toggle below it as pills in the shared pill shape (black when selected, secondary otherwise).
- "View all debates"/"View all claims" is a secondary pill at the right of that row, replacing the footer link.
- The gallery's arrows sit beside it, using the data block galleries' PreviousButton/NextButton. They're disabled at the row's ends rather than hidden, so "View all" never shifts.
- No outline, edge padding, divider or edge fade.
- The compact debate player (Activity only) has 12px corners, and the feeds keep 16px.
- Claim pages use the same section, so they get this header too.
Experience: each card leads with the latest role, then the company, then that role's dates, with no company-wide total. Earlier roles at the same company follow on the indented line.
Education: each card leads with the school, then the course in grey, then its dates.
Skills on a role: the "+N" chip is a button that reveals the rest of that role's skills.
Headings and logos: section titles use text-mediumTitle in the darkest text colour, and organisation logos are 50px.
Headline: the lines under the name lose their 4px gap, and the header gets 40px above the tab bar.

Sidebar

Sections: About, then Links, then Spaces. They lose their card borders and padding, with dividers between them. The About tab on narrow screens uses the same order.
- A vertical rule in the tab bar's grey (grey-02) separates the sidebar from the main column. It runs from the tab bar to the bottom of the viewport.
Spaces rows: styled like the space rows in the browse sidebar (padding, type, hover, current-space highlight, first-letter icon fallback).
- "Editor" is plain grey text.
- "See all" is a secondary pill below the list.
About:
- The description moves here from under the name, with its "More" toggle on its own line (ClampedText gains togglePlacement="below"). It's still edited in the header: EntityPageInlineDescription gains hideWhenReading, so it only shows there while editing.
- The Types row is removed, and the rows lose their dividers.
- "Space system data" is a closed-by-default accordion in the rows' own type, with the standard ChevronDownSmall and no background.
Spacing: the sidebar sits 20px from the divider. That padding is inside the scroller, so the Spaces rows align under their title and still bleed their hover background past it.

Outside the profile

design-system/button.tsx:
- The navbar Log in pill's classes (Match navbar login button to Rank styling #2469) move here as PILL_BUTTON_CLASS_NAME, with a PILL_BUTTON_SECONDARY_CLASS_NAME variant.
- buttonClassNames is now exported, so a link can take a button's styles without nesting a <button> inside it. The Activity header's pills use it.
- core/wallet/wallet.tsx uses the constant, and its rendered classes are unchanged.
StickySideRail: gains flushTop (no top padding) and divider (the vertical rule, with 20px of padding inside the scroller). Both default off, so Explore and the space pages are untouched.
ClampedText: gains togglePlacement, defaulting to the existing inline "More".
DebateFeedPlayer: in compact mode (reducedOverlays, the Activity gallery only) it uses 12px corners.
The cover: EntityPageCover takes an optional coverSize. Profiles pass 1200 × 300 (PROFILE_COVER_SIZE, 4:1), and every other page keeps 1192 × 320.

Merges with `master`

fix(profile): Activity gallery on mobile — scroll jump, overlapping chips, dead space (GEO-2974) #2466, fix(profile): coordinate compact debate playback #2518, fix: align activity debate interactions #2525: the Activity section was taken from master as-is, and the header changes above are layered on top. Tests were updated for the header (title, pills, header arrows disabled at the ends).
fix: compact side panel cover images #2520: the cover merges both new options, this branch's coverSize and fix: compact side panel cover images #2520's contentInsetClassName.

Checks

tsc --noEmit is clean.
ESLint and Prettier are clean on every changed file.
vitest run partials/profile passes (241 tests).
The full web suite passes: 590 files, 6,962 tests.

Not yet checked in a real browser at phone widths. The sidebar is hidden below 1024px, so the dividers and pills there only show on desktop.

🤖 Generated with Claude Code

Sidebar - Spaces, Links and About lose their card borders and padding, separated by rules instead; a vertical rule in the tab bar's grey divides the rail from the main column. - Space rows match the browse sidebar's rows; the Editor label is plain grey text; "See all" is a secondary pill below the list. - Type tags are secondary pills; About's rows lose their dividers. Main column - The description moves out of the header into an About section at the top (still edited in the header). - Activity splits into Claims and Debates sections, each with a black "View all" pill in its header; two cards fit across without cropping. - Experience leads with the role, then the company, then that role's dates; Education leads with the school, then the course, then its dates. - Section titles use the medium title style; organisation logos are 50px. Shared - The Log in pill's classes move to the design system as PILL_BUTTON_CLASS_NAME, with a secondary variant; buttonClassNames is exported so links can wear button styles. - The cover takes an optional size; a profile's is 1200 x 300. - StickySideRail gains flushTop and divider options. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Resolves the overlap with #2466 in the Activity section. Activity is now one section per kind with no Debates/Claims toggle, so the mobile scroll reserve that held the reader's position across a toggle has nothing left to guard, and it goes along with its tests. Kept from #2466: View all lands on the tab bar (`withSpaceTabsAnchor`), the gallery bleeds through the shell's gutter on a phone, cards align to the top, and a phone-width card is 84cqw. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

vercel · 2026-09-21T19:13:54Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
geogenesis	Ready	Preview	Sep 22, 2026 5:07pm UTC

Activity now matches master exactly — #2518 and #2525's compact playback, card widths, arrows and alignment, with the Debates/Claims toggle — and this branch's earlier Activity restyle (separate sections, View all pills, Claims-first order) is dropped. The cover merges both new options: this branch's `coverSize` and #2520's `contentInsetClassName`. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

… links Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Activity - Title stays; the Debates/Claims toggle sits below it as pills in the shared pill shape (black when selected, secondary otherwise). - "View all debates" / "View all claims" is a secondary pill at the right of that row, replacing the footer link; the gallery's arrows move beside it, using the data block galleries' Previous/Next buttons, disabled at the row's ends rather than hidden. - No outline, edge padding or divider; a 40px white fade marks the right edge while the row can scroll further. - The compact debate player's corners are 12px (16px in the feeds). Sidebar - The description moves back to the top of About, with its More toggle on a line of its own (`ClampedText` gains `togglePlacement="below"`). - Space system data is a closed-by-default accordion in the rows' own type, with the standard chevron and no background. - The rail sits 20px from the vertical divider, with that padding inside the scroller so the Spaces rows can align under their title and still bleed their hover background past it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

…e Activity fade Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Copilot

Copilot review overview

🟡 Changes recommended

Unresolved issues remain in profile description visibility and Activity responsiveness, control stability, and loading-state consistency.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 2 · 1

Open (3)

Prevent mobile control row overflow · New
Reserve gallery navigation buttons for stable header layout · New
Add coverage for below-line toggle placement · New

What changed in this PR

Restyles personal-space profiles and extends shared UI primitives for the updated layout.

Changes:

Reworks Activity, profile history, skills, headlines, and cover presentation.
Reorders and restyles About, Links, and Spaces sidebar sections.
Adds reusable pill-button, clamped-text, side-rail, cover-sizing, and compact-player options.

File	Summary
`apps/web/partials/profile/profile-record-sections.tsx`	Restyles experience, education, and skills.
`apps/web/partials/profile/profile-rail.tsx`	Reorders and restyles sidebar sections and space rows.
`apps/web/partials/profile/profile-headline.tsx`	Adjusts headline spacing.
`apps/web/partials/profile/profile-activity-section.tsx`	Adds pill controls, navigation arrows, and updated gallery layout.
`apps/web/partials/profile/profile-activity-section.test.tsx`	Updates Activity behavior tests.
`apps/web/partials/profile/personal-space-profile.tsx`	Updates Activity labels.
`apps/web/partials/profile/organization-image.tsx`	Adds larger organization logo sizing.
`apps/web/partials/entity-page/sticky-side-rail.tsx`	Adds flush-top and divider options.
`apps/web/partials/entity-page/entity-page-layout.ts`	Defines profile cover dimensions.
`apps/web/partials/entity-page/entity-page-inline-description.tsx`	Adds read-mode hiding.
`apps/web/partials/entity-page/entity-page-cover.tsx`	Supports configurable cover sizing.
`apps/web/partials/entity-page/editable-entity-cover-avatar-header.tsx`	Applies configurable cover dimensions.
`apps/web/design-system/clamped-text.tsx`	Adds below-line toggle placement.
`apps/web/design-system/button.tsx`	Exports reusable pill and button class helpers.
`apps/web/core/wallet/wallet.tsx`	Reuses shared login-pill styling.
`apps/web/core/debates/browse/debate-feed-player.tsx`	Adjusts compact player corner radius.
`apps/web/core/claims/browse/claim-page-view.tsx`	Updates Activity action labels.
`apps/web/app/space/[id]/(space)/layout.tsx`	Applies profile cover and spacing options.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+  if (isBelow) {
+    return (
+      <div ref={wrapperRef} className="box-border w-full min-w-0">
+        <Tag
+          ref={textRef as React.Ref<never>}


…erflow' Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

…ttons for stable header layout' Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

A suggested change replaced the whole <div> line with a bare className, which stopped the file parsing and failed the build. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

- The title (entityTitle), type/tag chips and the verdict form one block above the tabs, with Agree/Disagree inside the verdict and no card border or padding. 48px between the chips, the verdict and the tabs. - The percentage uses mainPage in the text colour; 12px above the bar, 8px below it, and no swatch dots on the sides row. - Controversial is a red chip beside the type and tag chips, in the chips' own size and type. - The responder list is titled "6 people agree" above the rows, puts people with a profile picture first, and highlights rows on hover like the browse sidebar. - The Debates tab lets a debate fill the content column. - Brings in the Activity section header from #2514 (pills, View all, header arrows, 12px compact player corners). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

o-p-o-p-o and others added 2 commits September 21, 2026 18:41

vercel Bot deployed to Preview September 21, 2026 19:16 View deployment

o-p-o-p-o and others added 2 commits September 22, 2026 10:04

chore(design-system): the black pill no longer backs profile View all…

2a8a907

… links Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview September 22, 2026 09:08 View deployment

vercel Bot deployed to Preview September 22, 2026 09:48 View deployment

o-p-o-p-o mentioned this pull request Sep 22, 2026

feat(claims): lay the claim page out like the Explore claim card, with a Topics tab #2526

Closed

o-p-o-p-o and others added 2 commits September 22, 2026 17:17

feat(profile): order the rail About, Links, Spaces; drop Types and th…

f131c16

…e Activity fade Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

style(profile): prettier

d747369

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview September 22, 2026 16:21 View deployment

Merge branch 'master' into personal-space-ui

76cd555

vercel Bot deployed to Preview September 22, 2026 16:40 View deployment

o-p-o-p-o requested a lite review from Copilot September 22, 2026 16:46

Copilot started reviewing on behalf of o-p-o-p-o September 22, 2026 16:46 View session

Copilot AI reviewed Sep 22, 2026

View reviewed changes

o-p-o-p-o and others added 2 commits September 22, 2026 17:55

Potential fix for pull request finding 'Prevent mobile control row ov…

f80fa99

…erflow' Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Potential fix for pull request finding 'Reserve gallery navigation bu…

97ab6da

…ttons for stable header layout' Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

vercel Bot had a problem deploying to Preview September 22, 2026 16:57 Failure

fix(profile): restore the Activity controls row's opening tag

8b563b4

A suggested change replaced the whole <div> line with a bare className, which stopped the file parsing and failed the build. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview September 22, 2026 17:07 View deployment

o-p-o-p-o merged commit 2c3f257 into master Sep 22, 2026
5 checks passed

jwalkingjew mentioned this pull request Sep 22, 2026

feat(claims): make the Topics tab an explore feed, with a topic card that says how big a topic is #2530

Merged

Navigation Menu

feat(profile): restyle the personal space profile - #2514

feat(profile): restyle the personal space profile#2514
o-p-o-p-o merged 11 commits into
masterfrom
personal-space-ui

o-p-o-p-o commented Sep 21, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Sep 21, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

o-p-o-p-o commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Main column

Sidebar

Outside the profile

Merges with master

Checks

Uh oh!

vercel Bot commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

o-p-o-p-o commented Sep 21, 2026 •

edited

Loading

Merges with `master`

vercel Bot commented Sep 21, 2026 •

edited

Loading