From fdf448d0b7d7e34fc3ad91a3fd448ee10ceb1bb7 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Mon, 19 Oct 2026 20:59:44 +0200
Subject: [PATCH] fix: give the calendar, contacts, files and settings sidebar
 headers the mail header's height

---
 .../calendar/calendar-sidebar-header.tsx      |  6 ++---
 components/contacts/contacts-sidebar.tsx      |  3 ++-
 components/files/files-sidebar.tsx            |  6 ++---
 components/settings/settings-app.tsx          | 23 +++++++++++--------
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/components/calendar/calendar-sidebar-header.tsx b/components/calendar/calendar-sidebar-header.tsx
index 79272d9aa..f2c6f68b5 100644
--- a/components/calendar/calendar-sidebar-header.tsx
+++ b/components/calendar/calendar-sidebar-header.tsx
@@ -18,10 +18,8 @@ export function CalendarSidebarHeader({ onCreateEvent, tourTarget = true }: Cale
   const t = useTranslations("calendar");
 
   return (
-    <div
-      className="px-3 border-b border-border flex items-center justify-between flex-shrink-0"
-      style={{ paddingBlock: "var(--density-header-py)" }}
-    >
+    // 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">
       <span className="text-sm font-semibold truncate">{t("title")}</span>
       <Button
         size="icon"
diff --git a/components/contacts/contacts-sidebar.tsx b/components/contacts/contacts-sidebar.tsx
index fb5ad8511..e625f2317 100644
--- a/components/contacts/contacts-sidebar.tsx
+++ b/components/contacts/contacts-sidebar.tsx
@@ -275,7 +275,8 @@ export function ContactsSidebar({
   return (
     <div className={cn("flex flex-col h-full bg-secondary", className)}>
       {/* Header */}
-      <div className="px-3 border-b border-border flex items-center justify-between" style={{ paddingBlock: 'var(--density-header-py)' }}>
+      {/* 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">
         <span className="text-sm font-semibold truncate">{t("title")}</span>
         <div className="relative flex-shrink-0">
           <Button
diff --git a/components/files/files-sidebar.tsx b/components/files/files-sidebar.tsx
index 0a81f5013..167fedded 100644
--- a/components/files/files-sidebar.tsx
+++ b/components/files/files-sidebar.tsx
@@ -258,10 +258,8 @@ export function FilesSidebar({
 
   return (
     <div className="flex flex-col h-full bg-secondary">
-      <div
-        className="px-3 border-b border-border flex items-center justify-between flex-shrink-0"
-        style={{ paddingBlock: "var(--density-header-py)" }}
-      >
+      {/* 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">
         <span className="text-sm font-semibold truncate">{t("title")}</span>
         {canCreate && (
           <Button
diff --git a/components/settings/settings-app.tsx b/components/settings/settings-app.tsx
index 95cb88f97..7d2b9d706 100644
--- a/components/settings/settings-app.tsx
+++ b/components/settings/settings-app.tsx
@@ -1025,16 +1025,19 @@ export function SettingsApp({ linkSegments: routeSegments }: SettingsAppProps =
         style={{ width: `${settingsSidebarWidth}px` }}
       >
         {!proInterface && (
-          <div className="p-4 border-b border-border">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => router.push('/')}
-              className="w-full justify-start"
-            >
-              <ArrowLeft className="w-4 h-4 me-2" />
-              {t('back_to_mail')}
-            </Button>
+          // Same h-14 box as the mail sidebar's account switcher, so the apps line up.
+          <div className="border-b border-border">
+            <div className="flex items-center h-14 px-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => router.push('/')}
+                className="w-full justify-start"
+              >
+                <ArrowLeft className="w-4 h-4 me-2" />
+                {t('back_to_mail')}
+              </Button>
+            </div>
           </div>
         )}