- 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:
+1
-1
@@ -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
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user