diff --git a/app/javascript/mastodon/components/column_header/index.tsx b/app/javascript/mastodon/components/column_header/index.tsx index d7c97116999..4c41a714471 100644 --- a/app/javascript/mastodon/components/column_header/index.tsx +++ b/app/javascript/mastodon/components/column_header/index.tsx @@ -6,6 +6,7 @@ import classNames from 'classnames'; import { useLocation } from 'react-router'; import { ArrowLeftIcon, ListIcon } from '@phosphor-icons/react'; +import type { DistributedOmit } from 'type-fest'; import { openNavigation } from '@/mastodon/actions/navigation'; import { getColumnSkipLinkId } from '@/mastodon/features/ui/components/skip_links'; @@ -92,7 +93,7 @@ export const ColumnHeader: React.FC = ({ ); }; -type ColumnHeaderButtonProps = IconButtonProps & { +type ColumnHeaderButtonProps = DistributedOmit & { showTextOnDesktop?: boolean; }; @@ -107,14 +108,14 @@ export const ColumnHeaderButton: React.FC = ({ if (showTextOnDesktop && !isMobile) { return ( - ); } return ( - + {children} ); diff --git a/app/javascript/mastodon/components/column_header/styles.module.scss b/app/javascript/mastodon/components/column_header/styles.module.scss index 1ba6af68fdc..6bc600b8da7 100644 --- a/app/javascript/mastodon/components/column_header/styles.module.scss +++ b/app/javascript/mastodon/components/column_header/styles.module.scss @@ -44,7 +44,9 @@ minmax(0, auto) minmax(min-content, 1fr); align-items: center; - min-height: 40px; + + // Ensure that a header without buttons is as tall as one with buttons + min-height: 32px; padding: var(--space-sm); text-align: center; color: var(--color-text-primary);