fix(profile): Activity gallery on mobile — scroll jump, overlapping chips, dead space (GEO-2974)

apps/web/app/space/[id]/(space)/layout.tsx

@@ -37,6 +37,7 @@ import { SpaceMembers } from '~/partials/space-page/space-members';
 import { SpacePageMetadataHeader } from '~/partials/space-page/space-metadata-header';
 import { SpaceTabs } from '~/partials/space-page/space-tabs';
 import type { PersonRecordCounts } from '~/partials/space-page/space-tabs';
+import { SPACE_TABS_ANCHOR } from '~/partials/space-page/space-tabs-anchor';
 
 import { cachedFetchEntitiesBatch, cachedFetchEntityPage } from '../../(entity)/[id]/[entityId]/cached-fetch-entity';
 import { cachedFetchSpace } from '../cached-fetch-space';
@@ -209,17 +210,28 @@ export default async function Layout(props0: LayoutProps) {
                 </>
               ) : null}
               <TypeSchemaInline entityId={props.id} spaceId={spaceId} />
-              <React.Suspense fallback={null}>
-                <SpaceTabs
-                  spaceId={spaceId}
-                  entityId={props.id}
-                  initialTabRelations={props.tabRelations ?? []}
-                  tabEntities={props.tabEntities}
-                  typeIds={typeIds}
-                  isProfile={isProfile}
-                  personRecordCounts={personRecordCounts}
-                />
-              </React.Suspense>
+              {/*
+               * The tab bar is a link target, so a link can send the reader to the tabs rather than
+               * to the top of the page — see `withSpaceTabsAnchor`.
+               *
+               * The margin clears the navbar, which is `sticky top-0 h-11` and would otherwise cover
+               * the row the link exists to show — the same 44px the hub panel and the side rail sit
+               * below as `top-11`. `scroll-mt-14` is that plus 12px, so the tabs land under the
+               * navbar rather than welded to it.
+               */}
+              <div id={SPACE_TABS_ANCHOR} className="scroll-mt-14">
+                <React.Suspense fallback={null}>
+                  <SpaceTabs
+                    spaceId={spaceId}
+                    entityId={props.id}
+                    initialTabRelations={props.tabRelations ?? []}
+                    tabEntities={props.tabEntities}
+                    typeIds={typeIds}
+                    isProfile={isProfile}
+                    personRecordCounts={personRecordCounts}
+                  />
+                </React.Suspense>
+              </div>
             </div>
           </SpaceHeaderContentGate>
           <Spacer height={20} />

apps/web/core/debates/browse/debate-feed-player.tsx

@@ -392,35 +392,49 @@ function DebaterVideo({
         </div>
       )}
 
-      {/* Debater identity: avatar + name + position, opens their personal space in the side panel. */}
-      <button
-        type="button"
-        onClick={openProfile}
-        className="absolute bottom-3 left-4 z-10 flex items-center gap-2 text-left"
-      >
-        <span className="block size-5 shrink-0 overflow-hidden rounded-full bg-white">
-          <Avatar avatarUrl={participant?.avatar_cid} value={participant?.profile_space_id} size={20} />
-        </span>
-        <span className="truncate text-[1rem] font-medium text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.55)]">
-          {name}
-        </span>
+      {/*
+       * The tile's bottom line: who is speaking on the left, the winner vote on
+       * the right.
+       *
+       * One row rather than two absolutely-positioned corners. They used to be
+       * `left-4` and `right-4` independently, which is fine at the width a feed
+       * card gives a tile and not at the width a 312px gallery card does — the
+       * name and its Agree/Disagree chip simply ran on underneath the button,
+       * which reads as "Ag…" and "Disagr…" with a pill on top. A flex row cannot
+       * overlap: the identity takes what is left after the vote, and the name
+       * truncates into it.
+       */}
+      <div className="pointer-events-none absolute inset-x-0 bottom-3 z-10 flex items-end justify-between gap-2 px-4">
+        {/* Debater identity: avatar + name + position, opens their personal space in the side panel. */}
+        <button
+          type="button"
+          onClick={openProfile}
+          className="pointer-events-auto flex min-w-0 items-center gap-2 text-left"
+        >
+          <span className="block size-5 shrink-0 overflow-hidden rounded-full bg-white">
+            <Avatar avatarUrl={participant?.avatar_cid} value={participant?.profile_space_id} size={20} />
+          </span>
+          <span className="truncate text-[1rem] font-medium text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.55)]">
+            {name}
+          </span>
+          {participant && (
+            <DebateTileChip className={cx('shrink-0 text-text', tileChipSurface)}>
+              {participant.position_label}
+            </DebateTileChip>
+          )}
+        </button>
+
         {participant && (
-          <DebateTileChip className={cx('shrink-0 text-text', tileChipSurface)}>
-            {participant.position_label}
-          </DebateTileChip>
+          <WinnerVoteButton
+            className="pointer-events-auto shrink-0"
+            debaterName={name}
+            sharePercent={votes.sharePercentFor(participant)}
+            isMyPick={votes.isMyPick(participant)}
+            disabled={votes.isVoting}
+            onVote={() => votes.castVote(participant)}
+          />
         )}
-      </button>
-
-      {participant && (
-        <WinnerVoteButton
-          className="absolute right-4 bottom-3 z-10"
-          debaterName={name}
-          sharePercent={votes.sharePercentFor(participant)}
-          isMyPick={votes.isMyPick(participant)}
-          disabled={votes.isVoting}
-          onVote={() => votes.castVote(participant)}
-        />
-      )}
+      </div>
 
       {scrubber && <div className="absolute inset-x-0 bottom-0 z-10">{scrubber}</div>}
     </div>