src/app/features/estate/EstateNavigator.tsx

@@ -2,6 +2,7 @@ import React, { MouseEventHandler, ReactNode, useCallback, useMemo, useRef } fro
 import { useNavigate } from 'react-router-dom';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { Avatar, Box, Chip, Icon, IconButton, Icons, Spinner, Text, color, config } from 'folds';
+import classNames from 'classnames';
 import { PageNav, PageNavContent, PageNavHeader } from '../../components/page';
 import {
   NavButton,
@@ -41,6 +42,7 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { EstateRoom, EstateTier } from './buildEstate';
 import { activateEstateRoom, awaitMyJoin } from './joinEstateRoom';
 import { useEstate, useEstateRootId } from './useEstate';
+import { SkyPlate } from '../scene/skyPlate.css';
 import * as css from './EstateNavigator.css';
 import { SkyStateControl } from '../scene/SkyStateControl';
 
@@ -326,7 +328,7 @@ export function EstateNavigator() {
         justifyContent="Center"
         gap="200"
         style={{ padding: 8 }}
-        className={css.Targets}
+        className={classNames(css.Targets, SkyPlate)}
       >
         <UnverifiedTab />
         <InboxTab />

src/app/features/scene/skyPlate.css.ts

@@ -1,7 +1,9 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 import { color, config } from 'folds';
 import { MessageBase, BubbleContent } from '../../components/message/layout/layout.css';
-import { PageContent, PageNavContent } from '../../components/page/style.css';
+import { UploadBoard } from '../../components/upload-board/UploadBoard.css';
+import { ScrollTopContainer } from '../../components/scroll-top-container/style.css';
+import { PageContent, PageHeroSection, PageNavContent } from '../../components/page/style.css';
 import { Editor } from '../../components/editor/Editor.css';
 import { MembersDrawer } from '../room/MembersDrawer.css';
 import { CallStatus } from '../call-status/styles.css';
@@ -35,6 +37,11 @@ export const plateRegions = [
   `.${Editor}`,
   `.${MembersDrawer}`,
   `.${CallStatus}`,
+  // Floating panes: the upload board, the scroll-to-top chip.
+  `.${UploadBoard}`,
+  `.${ScrollTopContainer}`,
+  // The welcome page's hero.
+  `.${PageHeroSection}`,
   // The bars over the composer.
   `.${RoomViewTyping}`,
   base(RoomViewFollowing),

src/app/features/scene/skyTheme.test.ts

@@ -2,7 +2,9 @@ import { describe, expect, it } from 'vitest';
 import { baked } from '../../../sky/baked';
 import { AA, contrast, luminance } from '../../../sky/skyTokens.js';
 import { Editor } from '../../components/editor/Editor.css';
-import { PageContent, PageNavContent } from '../../components/page/style.css';
+import { UploadBoard } from '../../components/upload-board/UploadBoard.css';
+import { ScrollTopContainer } from '../../components/scroll-top-container/style.css';
+import { PageContent, PageHeroSection, PageNavContent } from '../../components/page/style.css';
 import { CallStatus } from '../call-status/styles.css';
 import { MembersDrawer } from '../room/MembersDrawer.css';
 import { RoomViewTyping } from '../room/RoomViewTyping.css';
@@ -101,6 +103,12 @@ describe('the plate, where text cannot rest on bare sky', () => {
 });
 
 describe('regions that sit on the plate', () => {
+  it('plates the upload board, the scroll-to-top chip and the welcome hero', () => {
+    [UploadBoard, ScrollTopContainer, PageHeroSection].forEach((c) =>
+      expect(plateRegions).toContain(`.${c}`)
+    );
+  });
+
   // Every region whose text would otherwise rest on bare sky joins the one plate rule. The ink
   // and link of that plate are pinned above; this pins who is on it.
   const on = (cls: string) => expect(plateRegions).toContain(cls);