Redesign: Simplify column header structure (#40381)

app/javascript/mastodon/components/column_header/index.tsx

@@ -10,7 +10,6 @@ import { ArrowLeftIcon, ListIcon } from '@phosphor-icons/react';
 import { openNavigation } from '@/mastodon/actions/navigation';
 import { getColumnSkipLinkId } from '@/mastodon/features/ui/components/skip_links';
 import { useBreakpoint } from '@/mastodon/features/ui/hooks/useBreakpoint';
-import { RenderIntoTabsBarPortal } from '@/mastodon/features/ui/util/columns_context';
 import { useAppDispatch } from '@/mastodon/store';
 import { hasReactChildren } from '@/mastodon/utils/has_react_children';
 
@@ -51,12 +50,8 @@ export const ColumnHeader: React.FC<ColumnHeaderProps> = ({
     (withBackButton === 'auto' && location.state?.fromMastodon);
 
   return (
-    <RenderIntoTabsBarPortal>
-      <header
-        {...props}
-        className={classNames(className, classes.root)}
-        data-has-unread={withUnreadMarker}
-      >
+    <header {...props} className={classNames(className, classes.root)}>
+      <div className={classes.layout} data-has-unread={withUnreadMarker}>
         {hasBackButton ? <BackButton /> : <MobileMenuButton />}
         <NavigationFocusTarget className={classes.title}>
           <button
@@ -79,8 +74,8 @@ export const ColumnHeader: React.FC<ColumnHeaderProps> = ({
         {hasReactChildren(extraButtons) && (
           <div className={classes.rightButtons}>{extraButtons}</div>
         )}
-      </header>
-    </RenderIntoTabsBarPortal>
+      </div>
+    </header>
   );
 };
 

app/javascript/mastodon/components/column_header/styles.module.scss

@@ -2,6 +2,32 @@
 @use '@/styles/mastodon/variables';
 
 .root {
+  // Make bottom half of column header transparent to make the
+  // overlay gradient on the `.layout` class work
+  --column-header-gradient-start: 55%;
+
+  background: linear-gradient(
+    to bottom,
+    var(--color-bg-blend) var(--column-header-gradient-start),
+    transparent var(--column-header-gradient-start)
+  );
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  border-top: 0;
+
+  @media (width >= variables.$mobile-menu-breakpoint) {
+    border-top: 10px solid var(--color-bg-blend);
+  }
+
+  // Fix bg color for legacy column headers.
+  // Remove when new column headers are in.
+  & :global(.column-header) {
+    background: var(--color-bg-primary);
+  }
+}
+
+.layout {
   position: relative;
   display: grid;
 

app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss

@@ -51,38 +51,6 @@
   container: column / inline-size;
   color: var(--color-text-primary);
   background-color: var(--color-bg-primary);
-}
-
-.columnHeader {
-  // Make bottom half of column header transparent to make the
-  // overlay gradient of the nested `ColumnHeader` component work
-  --column-header-gradient-start: 55%;
-
-  background: linear-gradient(
-    to bottom,
-    var(--color-bg-blend) var(--column-header-gradient-start),
-    transparent var(--column-header-gradient-start)
-  );
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  border-top: 0;
-
-  @media (width >= $mobile-menu-breakpoint) {
-    border-top: 10px solid var(--color-bg-blend);
-  }
-
-  // Fix bg color for legacy column headers.
-  // Remove when new column headers are in.
-  & :global(.column-header) {
-    background: var(--color-bg-primary);
-  }
-}
-
-.content {
-  width: 100%;
-  height: 100%;
-  margin: 0 auto;
 
   :global(.column) {
     width: 100%;

app/javascript/mastodon/features/ui/components/columns_area/redesign.tsx

@@ -1,5 +1,3 @@
-import { useCallback } from 'react';
-
 import classNames from 'classnames';
 
 import { ComposeRedesignButton } from '@/mastodon/features/compose/redesign/trigger';
@@ -10,26 +8,10 @@ import { Footer } from 'mastodon/features/custom_homepage/components/footer';
 import { Header } from 'mastodon/features/custom_homepage/components/header';
 
 import { useBreakpoint } from '../../hooks/useBreakpoint';
-import { useColumnsContext } from '../../util/columns_context';
 
 import { MultiColumnContent } from './multi_column_content';
 import classes from './redesign.module.scss';
 
-const TabsBarPortal: React.FC<React.ComponentProps<'div'>> = (props) => {
-  const { setTabsBarElement } = useColumnsContext();
-
-  const setRef = useCallback(
-    (element: HTMLDivElement | null) => {
-      if (element) {
-        setTabsBarElement(element);
-      }
-    },
-    [setTabsBarElement],
-  );
-
-  return <div {...props} ref={setRef} />;
-};
-
 export const ColumnsAreaRedesign: React.FC<{
   singleColumn?: boolean;
   minimalShell?: boolean;
@@ -47,8 +29,6 @@ export const ColumnsAreaRedesign: React.FC<{
         <div className={classes.main}>
           <Header />
 
-          <TabsBarPortal className={classes.columnHeader} />
-
           <div className={classes.content}>{children}</div>
 
           <Footer />
@@ -65,11 +45,7 @@ export const ColumnsAreaRedesign: React.FC<{
         </div>
         {isMobile ? <RedesignMobileNavigation /> : <ComposeRedesignButton />}
 
-        <main className={classes.main}>
-          <TabsBarPortal className={classes.columnHeader} />
-
-          <div className={classes.content}>{children}</div>
-        </main>
+        <main className={classes.main}>{children}</main>
       </div>
     );
   }