diff --git a/app/javascript/mastodon/components/column_header/index.tsx b/app/javascript/mastodon/components/column_header/index.tsx index c21af93d22e..3746581f147 100644 --- a/app/javascript/mastodon/components/column_header/index.tsx +++ b/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 = ({ (withBackButton === 'auto' && location.state?.fromMastodon); return ( - -
+
+
{hasBackButton ? : }
- + +
); }; diff --git a/app/javascript/mastodon/components/column_header/styles.module.scss b/app/javascript/mastodon/components/column_header/styles.module.scss index da7bcc9e086..3b4ce5779df 100644 --- a/app/javascript/mastodon/components/column_header/styles.module.scss +++ b/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; diff --git a/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss b/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss index b32fc29be2d..0969ac37341 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss +++ b/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%; diff --git a/app/javascript/mastodon/features/ui/components/columns_area/redesign.tsx b/app/javascript/mastodon/features/ui/components/columns_area/redesign.tsx index 5f838295f96..cb17fe38265 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area/redesign.tsx +++ b/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> = (props) => { - const { setTabsBarElement } = useColumnsContext(); - - const setRef = useCallback( - (element: HTMLDivElement | null) => { - if (element) { - setTabsBarElement(element); - } - }, - [setTabsBarElement], - ); - - return
; -}; - export const ColumnsAreaRedesign: React.FC<{ singleColumn?: boolean; minimalShell?: boolean; @@ -47,8 +29,6 @@ export const ColumnsAreaRedesign: React.FC<{
- -
{children}
@@ -65,11 +45,7 @@ export const ColumnsAreaRedesign: React.FC<{
{isMobile ? : } -
- - -
{children}
-
+
{children}
); }