fix: scroll to startHour on load and fix time label visibility
- Add timeGridWrapperRef to scroll the correct container (wrapper has overflow-y: scroll, inner elements have overflow: visible) - Scroll wrapper to startHour offset on load and when startHour changes - Time labels use translateY(-0.4em) so first/last hours aren't clipped by the sticky header or container edge - jumpToHour also targets the wrapper ref v1.33.5 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
8b68c50445
commit
0f214040ff
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "my-weekly-todo-list",
|
||||
"version": "1.33.4",
|
||||
"version": "1.33.5",
|
||||
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -2417,6 +2417,7 @@ h3 {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transform: translateY(-0.4em);
|
||||
}
|
||||
|
||||
.time-slot-label.hour-start {
|
||||
|
||||
@ -2202,6 +2202,7 @@ export default function WeeklyView() {
|
||||
intendedScrollTop.current = scrollOffset;
|
||||
|
||||
const perform = () => {
|
||||
if (timeGridWrapperRef.current) timeGridWrapperRef.current.scrollTop = scrollOffset;
|
||||
if (gridRef.current) gridRef.current.scrollTop = scrollOffset;
|
||||
if (timeColumnRef.current) timeColumnRef.current.scrollTop = scrollOffset;
|
||||
};
|
||||
@ -2587,7 +2588,9 @@ export default function WeeklyView() {
|
||||
const slotHeight = getSlotHeight(cellDuration);
|
||||
const scrollOffset = workingHoursStart * slotsPerHour * slotHeight;
|
||||
|
||||
// Force it directly
|
||||
// Scroll the time-grid-wrapper (the scrollable viewport)
|
||||
if (timeGridWrapperRef.current) timeGridWrapperRef.current.scrollTop = scrollOffset;
|
||||
// Also scroll inner refs as fallback
|
||||
if (gridRef.current) gridRef.current.scrollTop = scrollOffset;
|
||||
if (timeColumnRef.current) timeColumnRef.current.scrollTop = scrollOffset;
|
||||
|
||||
@ -2596,6 +2599,7 @@ export default function WeeklyView() {
|
||||
// On initial load, re-enforce for 2s to fight browser auto-scroll restoration
|
||||
if (!isInitialScrollDone.current) {
|
||||
const interval = setInterval(() => {
|
||||
if (timeGridWrapperRef.current) timeGridWrapperRef.current.scrollTop = scrollOffset;
|
||||
if (gridRef.current) gridRef.current.scrollTop = scrollOffset;
|
||||
if (timeColumnRef.current) timeColumnRef.current.scrollTop = scrollOffset;
|
||||
}, 50);
|
||||
@ -3448,6 +3452,7 @@ export default function WeeklyView() {
|
||||
|
||||
// Navigation handlers with CSS class-based slide animation (works in all browsers)
|
||||
const gridRef = useRef<HTMLElement>(null);
|
||||
const timeGridWrapperRef = useRef<HTMLDivElement>(null);
|
||||
const allSlideClasses = ["slide-animate-next", "slide-animate-prev", "slide-animate-week-next", "slide-animate-week-prev"];
|
||||
const navigate = (
|
||||
newDate: Date,
|
||||
@ -6341,7 +6346,7 @@ export default function WeeklyView() {
|
||||
})()}
|
||||
|
||||
{/* Main Grid with Time Column */}
|
||||
{viewStyle !== "kanban" && <div className="time-grid-wrapper" style={showTimeGrid ? {
|
||||
{viewStyle !== "kanban" && <div className="time-grid-wrapper" ref={timeGridWrapperRef} style={showTimeGrid ? {
|
||||
maxHeight: `${(endHour - startHour) * (60 / cellDuration) * getSlotHeight(cellDuration) + measuredHeaderHeight}px`,
|
||||
} : undefined}>
|
||||
{/* Time Column */}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user