fix: give every app's sidebar header and toolbar the same height as mail

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"

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"

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

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"

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

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"

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