From ed4be96706d32edba10378201ac001b33b4c4e6b Mon Sep 17 00:00:00 2001
From: Linus Rath <minipixxelinfo@gmail.com>
Date: Mon, 16 Mar 2026 11:02:34 +0100
Subject: [PATCH] fix: update sidebar border styling for consistency across
 pages

---
 app/[locale]/calendar/page.tsx           | 83 ++++++++++++------------
 app/[locale]/contacts/page.tsx           |  2 +-
 app/[locale]/files/page.tsx              |  2 +-
 app/[locale]/page.tsx                    |  2 +-
 app/[locale]/settings/page.tsx           |  2 +-
 components/calendar/calendar-toolbar.tsx | 24 +++----
 6 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/app/[locale]/calendar/page.tsx b/app/[locale]/calendar/page.tsx
index 5ded7c39..ac8c2e61 100644
--- a/app/[locale]/calendar/page.tsx
+++ b/app/[locale]/calendar/page.tsx
@@ -697,7 +697,7 @@ export default function CalendarPage() {
     <div className="flex h-dvh bg-background overflow-hidden">
       {/* Left Navigation Rail */}
       {!isMobile && (
-        <div className="w-14 border-r border-border bg-secondary flex flex-col flex-shrink-0">
+        <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
           <NavigationRail
             collapsed
             quota={quota}
@@ -707,6 +707,47 @@ export default function CalendarPage() {
         </div>
       )}
 
+      {/* Sidebar - full height */}
+      {!isMobile && (
+        <>
+          <div
+            className={cn(
+              "border-r border-border bg-secondary overflow-y-auto flex-shrink-0 p-3",
+              !isResizing && "transition-[width] duration-300"
+            )}
+            style={{ width: `${calSidebarWidth}px` }}
+          >
+            <MiniCalendar
+              selectedDate={selectedDate}
+              displayMonth={miniMonth}
+              onSelectDate={handleSelectDate}
+              onChangeMonth={handleMiniMonthChange}
+              events={events}
+              firstDayOfWeek={firstDayOfWeek}
+            />
+            <CalendarSidebarPanel
+              calendars={calendars}
+              selectedCalendarIds={selectedCalendarIds}
+              onToggleVisibility={toggleCalendarVisibility}
+              onColorChange={client ? (calendarId, color) => {
+                updateCalendar(client, calendarId, { color });
+              } : undefined}
+              onSubscribe={() => setShowSubscriptionModal(true)}
+              client={client}
+            />
+          </div>
+          <ResizeHandle
+            onResizeStart={() => { dragStartWidth.current = calSidebarWidth; setIsResizing(true); }}
+            onResize={(delta) => setCalSidebarWidth(Math.max(180, Math.min(400, dragStartWidth.current + delta)))}
+            onResizeEnd={() => {
+              setIsResizing(false);
+              localStorage.setItem("calendar-sidebar-width", String(calSidebarWidth));
+            }}
+            onDoubleClick={() => { setCalSidebarWidth(256); localStorage.setItem("calendar-sidebar-width", "256"); }}
+          />
+        </>
+      )}
+
       <div className="flex flex-col flex-1 min-w-0">
         <CalendarToolbar
           selectedDate={selectedDate}
@@ -729,46 +770,6 @@ export default function CalendarPage() {
           onTouchStart={handleTouchStart}
           onTouchEnd={handleTouchEnd}
         >
-          {!isMobile && (
-            <>
-              <div
-                className={cn(
-                  "border-r border-border bg-secondary overflow-y-auto flex-shrink-0 p-3",
-                  !isResizing && "transition-[width] duration-300"
-                )}
-                style={{ width: `${calSidebarWidth}px` }}
-              >
-                <MiniCalendar
-                  selectedDate={selectedDate}
-                  displayMonth={miniMonth}
-                  onSelectDate={handleSelectDate}
-                  onChangeMonth={handleMiniMonthChange}
-                  events={events}
-                  firstDayOfWeek={firstDayOfWeek}
-                />
-                <CalendarSidebarPanel
-                  calendars={calendars}
-                  selectedCalendarIds={selectedCalendarIds}
-                  onToggleVisibility={toggleCalendarVisibility}
-                  onColorChange={client ? (calendarId, color) => {
-                    updateCalendar(client, calendarId, { color });
-                  } : undefined}
-                  onSubscribe={() => setShowSubscriptionModal(true)}
-                  client={client}
-                />
-              </div>
-              <ResizeHandle
-                onResizeStart={() => { dragStartWidth.current = calSidebarWidth; setIsResizing(true); }}
-                onResize={(delta) => setCalSidebarWidth(Math.max(180, Math.min(400, dragStartWidth.current + delta)))}
-                onResizeEnd={() => {
-                  setIsResizing(false);
-                  localStorage.setItem("calendar-sidebar-width", String(calSidebarWidth));
-                }}
-                onDoubleClick={() => { setCalSidebarWidth(256); localStorage.setItem("calendar-sidebar-width", "256"); }}
-              />
-            </>
-          )}
-
           {renderView()}
 
           {/* Desktop event panel */}
diff --git a/app/[locale]/contacts/page.tsx b/app/[locale]/contacts/page.tsx
index 9c7f16cd..df6f08e7 100644
--- a/app/[locale]/contacts/page.tsx
+++ b/app/[locale]/contacts/page.tsx
@@ -437,7 +437,7 @@ export default function ContactsPage() {
   return (
     <div className="flex h-dvh bg-background overflow-hidden">
       {!isMobile && (
-        <div className="w-14 border-r border-border bg-secondary flex flex-col flex-shrink-0">
+        <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
           <NavigationRail
             collapsed
             quota={quota}
diff --git a/app/[locale]/files/page.tsx b/app/[locale]/files/page.tsx
index 2849b437..74670265 100644
--- a/app/[locale]/files/page.tsx
+++ b/app/[locale]/files/page.tsx
@@ -348,7 +348,7 @@ export default function FilesPage() {
   return (
     <div className="flex h-dvh bg-background overflow-hidden">
       {!isMobile && (
-        <div className="w-14 border-r border-border bg-secondary flex flex-col flex-shrink-0">
+        <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
           <NavigationRail
             collapsed
             quota={quota}
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 69d57021..fc614c89 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -935,7 +935,7 @@ export default function Home() {
         <div className="flex flex-1 overflow-hidden">
         {/* Desktop Navigation Rail */}
         {!isMobile && !isTablet && (
-          <div className="w-14 border-r border-border bg-secondary flex flex-col flex-shrink-0">
+          <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
             <NavigationRail
               collapsed
               quota={quota}
diff --git a/app/[locale]/settings/page.tsx b/app/[locale]/settings/page.tsx
index 11a1dfc5..6b582691 100644
--- a/app/[locale]/settings/page.tsx
+++ b/app/[locale]/settings/page.tsx
@@ -284,7 +284,7 @@ export default function SettingsPage() {
   return (
     <div className="flex h-dvh bg-background">
       {/* Navigation Rail */}
-      <div className="w-14 border-r border-border bg-secondary flex flex-col flex-shrink-0">
+      <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
         <NavigationRail
           collapsed
           quota={quota}
diff --git a/components/calendar/calendar-toolbar.tsx b/components/calendar/calendar-toolbar.tsx
index c199773d..2395a1e0 100644
--- a/components/calendar/calendar-toolbar.tsx
+++ b/components/calendar/calendar-toolbar.tsx
@@ -118,17 +118,19 @@ export function CalendarToolbar({
 
   return (
     <div className={cn("flex items-center gap-1.5 px-2 py-2 border-b border-border flex-wrap", !isMobile && "px-4 py-3 gap-2")}>
-      <div className="flex items-center gap-0.5">
-        <button onClick={onPrev} className="p-2 rounded hover:bg-muted transition-colors touch-manipulation" aria-label={t("nav_prev")}>
-          <ChevronLeft className="w-4 h-4" />
-        </button>
-        <span className={cn("text-sm font-medium text-center", isMobile ? "min-w-[80px]" : "min-w-[140px]")}>
-          {getDateLabel()}
-        </span>
-        <button onClick={onNext} className="p-2 rounded hover:bg-muted transition-colors touch-manipulation" aria-label={t("nav_next")}>
-          <ChevronRight className="w-4 h-4" />
-        </button>
-      </div>
+      {isMobile && (
+        <div className="flex items-center gap-0.5">
+          <button onClick={onPrev} className="p-2 rounded hover:bg-muted transition-colors touch-manipulation" aria-label={t("nav_prev")}>
+            <ChevronLeft className="w-4 h-4" />
+          </button>
+          <span className={cn("text-sm font-medium text-center min-w-[80px]")}>
+            {getDateLabel()}
+          </span>
+          <button onClick={onNext} className="p-2 rounded hover:bg-muted transition-colors touch-manipulation" aria-label={t("nav_next")}>
+            <ChevronRight className="w-4 h-4" />
+          </button>
+        </div>
+      )}
 
       <Button variant="outline" size="sm" onClick={onToday} className="touch-manipulation">
         {t("views.today")}