fix: right-side content cutoff on tasks page
continuous-integration/drone/push Build is passing

- 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
This commit is contained in:
NotiBot
2026-02-03 23:25:57 +01:00
parent 08a9e349f2
commit 04402c6b65
3 changed files with 10 additions and 8 deletions
+1 -1
View File
@@ -360,7 +360,7 @@ function AppContent() {
<span className="font-bold text-lg">{t('app.title')}</span> <span className="font-bold text-lg">{t('app.title')}</span>
</div> </div>
</header> </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> <Switch>
<Route path="/"> <Route path="/">
<FocusMode <FocusMode
+8 -6
View File
@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react'; import { useState, useEffect, useRef } from 'react';
import { Card } from '@/components/ui/card'; import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
@@ -60,12 +60,14 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onT
refetchOnWindowFocus: false, 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(() => { useEffect(() => {
const calculateVisibleDays = () => { const calculateVisibleDays = () => {
const screenWidth = window.innerWidth; // Use actual container width (accounts for sidebar) instead of window.innerWidth
// Subtract margins and padding (approximately 32px total) const containerWidth = containerRef.current?.offsetWidth ?? window.innerWidth;
const availableWidth = screenWidth - 32; // Subtract padding (approximately 32px total)
const availableWidth = containerWidth - 32;
// Minimum width per day card (including gaps): ~120px // Minimum width per day card (including gaps): ~120px
const minDayWidth = 120; const minDayWidth = 120;
const maxDays = Math.floor(availableWidth / minDayWidth); const maxDays = Math.floor(availableWidth / minDayWidth);
@@ -257,7 +259,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onT
}; };
return ( 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 */} {/* 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="flex-none pb-3 mb-2 bg-background/95 backdrop-blur z-40 border-b">
<div className="space-y-3"> <div className="space-y-3">
+1 -1
View File
@@ -310,7 +310,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
<main <main
data-slot="sidebar-inset" data-slot="sidebar-inset"
className={cn( 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", "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 className
)} )}