fix: give every button in the selection bar the same size

components/email/batch-tag-button.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { Button } from "@/components/ui/button";
+import { IconButton } from "@/components/ui/icon-button";
 import { Tag } from "@/components/icons";
 import { TagPicker } from "./tag-picker";
 
@@ -63,10 +63,9 @@ export function BatchTagButton({
 
   return (
     <>
-      <Button
+      <IconButton
         ref={buttonRef}
-        variant="ghost"
-        size="sm"
+        label={title}
         data-testid="batch-tag"
         onClick={(event) => {
           const rect = event.currentTarget.getBoundingClientRect();
@@ -79,15 +78,12 @@ export function BatchTagButton({
                 },
           );
         }}
-        title={title}
-        aria-label={title}
         aria-haspopup="menu"
         aria-expanded={isOpen}
         disabled={disabled}
-        className="hover:bg-accent transition-colors disabled:opacity-50"
       >
-        <Tag className="w-4 h-4" />
-      </Button>
+        <Tag />
+      </IconButton>
       {isOpen &&
         createPortal(
           <div

components/email/email-list.tsx

@@ -965,17 +965,28 @@ export function EmailList({
               />
             )}
             <div className={cn("w-px h-6 bg-border", batchNarrow ? "mx-0.5" : "mx-1")} />
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={clearSelection}
-              title={t('batch_actions.clear_selection')}
-              aria-label={t('batch_actions.clear_selection')}
-              disabled={isProcessing}
-              className="text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50 whitespace-nowrap"
-            >
-              {batchNarrow ? <X className="w-4 h-4" /> : t('batch_actions.clear_selection')}
-            </Button>
+            {/* The bar's buttons share one height (R1): 32px icons, and the
+                text button at xs when there is room for it. */}
+            {batchNarrow ? (
+              <IconButton
+                label={t('batch_actions.clear_selection')}
+                onClick={clearSelection}
+                disabled={isProcessing}
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <X />
+              </IconButton>
+            ) : (
+              <Button
+                variant="ghost"
+                size="xs"
+                onClick={clearSelection}
+                disabled={isProcessing}
+                className="text-muted-foreground hover:text-foreground whitespace-nowrap"
+              >
+                {t('batch_actions.clear_selection')}
+              </Button>
+            )}
           </div>
         </div>
         )}