Redesign: Make column header buttons smaller (#40553)

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>
   );

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);