From 07627b3a60bcdc8a182c34f8d7f091703d7dbe25 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Sun, 25 Oct 2026 12:30:23 +0100
Subject: [PATCH] fix: give every app's sidebar header and toolbar the same
 height as mail

---
 components/calendar/calendar-sidebar-header.tsx | 5 +++--
 components/calendar/calendar-toolbar.tsx        | 2 +-
 components/calendar/task-toolbar.tsx            | 2 +-
 components/contacts/contact-list.tsx            | 4 ++--
 components/contacts/contacts-sidebar.tsx        | 2 +-
 components/files/files-header.tsx               | 9 ++++-----
 components/files/files-sidebar.tsx              | 2 +-
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/calendar/calendar-sidebar-header.tsx b/components/calendar/calendar-sidebar-header.tsx
index f2c6f68b5..e9120d91a 100644
--- a/components/calendar/calendar-sidebar-header.tsx
+++ b/components/calendar/calendar-sidebar-header.tsx
@@ -18,8 +18,9 @@ export function CalendarSidebarHeader({ onCreateEvent, tourTarget = true }: Cale
   const t = useTranslations("calendar");
 
   return (
-    // Same h-14 box as the mail sidebar's account switcher, so the apps line up.
-    <div className="px-3 h-14 border-b border-border flex items-center justify-between flex-shrink-0">
+    // Same h-14 box as the mail sidebar's account switcher, so the apps line up;
+    // box-content keeps the border outside it, as in mail.
+    <div className="px-3 h-14 box-content border-b border-border flex items-center justify-between flex-shrink-0">
       <span className="text-sm font-semibold truncate">{t("title")}</span>
       <Button
         size="icon"
diff --git a/components/calendar/calendar-toolbar.tsx b/components/calendar/calendar-toolbar.tsx
index 99eba0c23..2ba57c760 100644
--- a/components/calendar/calendar-toolbar.tsx
+++ b/components/calendar/calendar-toolbar.tsx
@@ -332,7 +332,7 @@ export function CalendarToolbar({
   const currentViewLabel = t(`views.${viewMode}`);
 
   return (
-    <div className="flex items-center gap-1 px-4 border-b border-border" style={{ paddingBlock: "var(--density-header-py)" }}>
+    <div className="flex items-center gap-1 px-4 h-14 box-content border-b border-border flex-shrink-0">
       {onMenuClick && (
         <Button
           variant="ghost"
diff --git a/components/calendar/task-toolbar.tsx b/components/calendar/task-toolbar.tsx
index 7accbe05d..670e678bc 100644
--- a/components/calendar/task-toolbar.tsx
+++ b/components/calendar/task-toolbar.tsx
@@ -37,7 +37,7 @@ export function TaskToolbar({
   const pluginContext = useMemo(() => ({ taskIds }), [taskIds]);
 
   return (
-    <div className="flex items-center gap-2 px-4 py-2 border-b border-border flex-wrap">
+    <div className="flex items-center gap-2 px-4 min-h-14 box-content border-b border-border flex-wrap">
       <div className="flex border border-border rounded-md overflow-hidden">
         {FILTERS.map((f) => (
           <button
diff --git a/components/contacts/contact-list.tsx b/components/contacts/contact-list.tsx
index 8c0bb12bc..e9f06d76e 100644
--- a/components/contacts/contact-list.tsx
+++ b/components/contacts/contact-list.tsx
@@ -276,8 +276,8 @@ export function ContactList({
     <div className={cn("flex flex-col h-full", className)}>
       {/* Toolbar: select / search / filter */}
       <div className="border-b border-border bg-background">
-        <div className="px-3 py-3">
-          <div className="flex items-center gap-1.5">
+        <div className="px-3 h-14 flex items-center">
+          <div className="flex items-center gap-1.5 w-full">
             {onMenuClick && (
               <button
                 type="button"
diff --git a/components/contacts/contacts-sidebar.tsx b/components/contacts/contacts-sidebar.tsx
index e625f2317..c40243b5a 100644
--- a/components/contacts/contacts-sidebar.tsx
+++ b/components/contacts/contacts-sidebar.tsx
@@ -276,7 +276,7 @@ export function ContactsSidebar({
     <div className={cn("flex flex-col h-full bg-secondary", className)}>
       {/* Header */}
       {/* Same h-14 box as the mail sidebar's account switcher, so the apps line up. */}
-      <div className="px-3 h-14 border-b border-border flex items-center justify-between flex-shrink-0">
+      <div className="px-3 h-14 box-content border-b border-border flex items-center justify-between flex-shrink-0">
         <span className="text-sm font-semibold truncate">{t("title")}</span>
         <div className="relative flex-shrink-0">
           <Button
diff --git a/components/files/files-header.tsx b/components/files/files-header.tsx
index 9fdb298cc..4070c05b1 100644
--- a/components/files/files-header.tsx
+++ b/components/files/files-header.tsx
@@ -110,12 +110,11 @@ export function FilesHeader({
   const [searchOpen, setSearchOpen] = useState(false);
   const [dropCrumb, setDropCrumb] = useState<string | null>(null);
 
-  const headerClass = "flex items-center gap-1 px-3 border-b border-border min-w-0 flex-shrink-0";
-  const headerStyle = { paddingBlock: "var(--density-header-py)" };
+  const headerClass = "flex items-center gap-1 px-3 h-14 box-content border-b border-border min-w-0 flex-shrink-0";
 
   if (selection) {
     return (
-      <div role="toolbar" aria-label={t("selection_actions")} className={cn(headerClass, "bg-accent/40")} style={headerStyle}>
+      <div role="toolbar" aria-label={t("selection_actions")} className={cn(headerClass, "bg-accent/40")}>
         <Button variant="ghost" size="icon" className="h-8 w-8 -ms-1" onClick={selection.onClear} aria-label={t("clear_selection")} title={t("clear_selection")}>
           <X className="w-4 h-4" />
         </Button>
@@ -226,14 +225,14 @@ export function FilesHeader({
 
   if (compact && searchOpen && !toolsHidden) {
     return (
-      <div className={headerClass} style={headerStyle}>
+      <div className={headerClass}>
         {searchField}
       </div>
     );
   }
 
   return (
-    <div role="toolbar" aria-label={t("toolbar")} className={headerClass} style={headerStyle}>
+    <div role="toolbar" aria-label={t("toolbar")} className={headerClass}>
       {onMenuClick && (
         <Button
           variant="ghost"
diff --git a/components/files/files-sidebar.tsx b/components/files/files-sidebar.tsx
index 167fedded..9bb858444 100644
--- a/components/files/files-sidebar.tsx
+++ b/components/files/files-sidebar.tsx
@@ -259,7 +259,7 @@ export function FilesSidebar({
   return (
     <div className="flex flex-col h-full bg-secondary">
       {/* Same h-14 box as the mail sidebar's account switcher, so the apps line up. */}
-      <div className="px-3 h-14 border-b border-border flex items-center justify-between flex-shrink-0">
+      <div className="px-3 h-14 box-content border-b border-border flex items-center justify-between flex-shrink-0">
         <span className="text-sm font-semibold truncate">{t("title")}</span>
         {canCreate && (
           <Button