From f9b7feb7a19de56bd505503cadd0cd62461d39ff Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Wed, 16 Sep 2026 13:54:16 +0000
Subject: [PATCH] Redesign: Make column header buttons smaller (#40553)

---
 app/javascript/mastodon/components/column_header/index.tsx | 7 ++++---
 .../mastodon/components/column_header/styles.module.scss   | 4 +++-
 2 files changed, 7 insertions(+), 4 deletions(-)

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<ColumnHeaderProps> = ({
   );
 };
 
-type ColumnHeaderButtonProps = IconButtonProps & {
+type ColumnHeaderButtonProps = DistributedOmit<IconButtonProps, 'size'> & {
   showTextOnDesktop?: boolean;
 };
 
@@ -107,14 +108,14 @@ export const ColumnHeaderButton: React.FC<ColumnHeaderButtonProps> = ({
 
   if (showTextOnDesktop && !isMobile) {
     return (
-      <Button {...props} variant={variant}>
+      <Button {...props} variant={variant} size='sm'>
         {children}
       </Button>
     );
   }
 
   return (
-    <IconButton icon={icon} variant={variant} {...props}>
+    <IconButton icon={icon} {...props} variant={variant} size='sm'>
       {children}
     </IconButton>
   );
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);