From 04402c6b6584095f38bd350d1a3bd21df06031f5 Mon Sep 17 00:00:00 2001
From: NotiBot <notibot@nothaft.cloud>
Date: Tue, 3 Feb 2026 23:25:57 +0100
Subject: [PATCH] fix: right-side content cutoff on tasks page

- SidebarInset: use min-w-0 + overflow-x-hidden instead of w-full
- Calendar: measure container width instead of viewport width
- Remove unnecessary max-w-screen-2xl from main content area
---
 client/src/App.tsx                          |  2 +-
 client/src/components/TasksWithCalendar.tsx | 14 ++++++++------
 client/src/components/ui/sidebar.tsx        |  2 +-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 3608ef8..8c69ea1 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -360,7 +360,7 @@ function AppContent() {
                 <span className="font-bold text-lg">{t('app.title')}</span>
               </div>
             </header>
-            <main className="flex-1 p-4 md:p-6 max-w-screen-2xl mx-auto w-full relative">
+            <main className="flex-1 p-4 md:p-6 w-full relative">
               <Switch>
                 <Route path="/">
                   <FocusMode
diff --git a/client/src/components/TasksWithCalendar.tsx b/client/src/components/TasksWithCalendar.tsx
index 26f7d6b..7167b73 100644
--- a/client/src/components/TasksWithCalendar.tsx
+++ b/client/src/components/TasksWithCalendar.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -60,12 +60,14 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onT
     refetchOnWindowFocus: false,
   });
 
-  // Calculate responsive visible days based on screen width
+  // Calculate responsive visible days based on available container width
+  const containerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     const calculateVisibleDays = () => {
-      const screenWidth = window.innerWidth;
-      // Subtract margins and padding (approximately 32px total)
-      const availableWidth = screenWidth - 32;
+      // Use actual container width (accounts for sidebar) instead of window.innerWidth
+      const containerWidth = containerRef.current?.offsetWidth ?? window.innerWidth;
+      // Subtract padding (approximately 32px total)
+      const availableWidth = containerWidth - 32;
       // Minimum width per day card (including gaps): ~120px
       const minDayWidth = 120;
       const maxDays = Math.floor(availableWidth / minDayWidth);
@@ -257,7 +259,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onT
   };
 
   return (
-    <div className="flex flex-col h-[calc(100vh-6rem)] relative">
+    <div ref={containerRef} className="flex flex-col h-[calc(100vh-6rem)] relative">
       {/* Header and Search Filters - Fixed at Top */}
       <div className="flex-none pb-3 mb-2 bg-background/95 backdrop-blur z-40 border-b">
         <div className="space-y-3">
diff --git a/client/src/components/ui/sidebar.tsx b/client/src/components/ui/sidebar.tsx
index 496e40d..bedbf62 100644
--- a/client/src/components/ui/sidebar.tsx
+++ b/client/src/components/ui/sidebar.tsx
@@ -310,7 +310,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
+        "bg-background relative flex min-w-0 flex-1 flex-col overflow-x-hidden",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}