mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile view header density, today logic, and sticky layout

Browse Source
This commit is contained in:
mARTin 2026-03-04 11:32:45 +01:00
parent 8ea3720831
commit 0632e03326
2 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/app/globals.css
View File

@ -3173,6 +3173,26 @@ h3 {
.weekly-day-column { .weekly-day-column {
min-height: auto; min-height: auto;
} }
/* D) Mobile: sticky day header at top so user always knows which day */
.weekly-days-grid {
overflow-y: auto;
overflow-x: hidden;
}
.weekly-day-column {
overflow-y: visible;
overflow-x: visible;
max-height: none;
}
.weekly-day-header {
position: sticky;
top: 0;
z-index: 10;
background: var(--weekly-bg, white);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
@ -3191,15 +3211,6 @@ h3 {
font-size: 1rem; font-size: 1rem;
} }
/* D) Mobile: sticky day header at top so user always knows which day */
.weekly-day-header {
position: sticky;
top: 0;
z-index: 10;
background: var(--weekly-bg, white);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.dark-mode .weekly-day-header { .dark-mode .weekly-day-header {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
} }

6
src/components/WeeklyView.tsx
View File

@ -516,7 +516,6 @@ export default function WeeklyView() {
const [currentWeekStart, setCurrentWeekStart] = useState(() => { const [currentWeekStart, setCurrentWeekStart] = useState(() => {
const d = new Date(); const d = new Date();
d.setHours(0, 0, 0, 0); d.setHours(0, 0, 0, 0);
d.setDate(d.getDate() - 1);
return d; return d;
}); });
const [viewDays, setViewDays] = useState(7); const [viewDays, setViewDays] = useState(7);
@ -2151,7 +2150,6 @@ export default function WeeklyView() {
const goToToday = () => { const goToToday = () => {
const d = new Date(); const d = new Date();
d.setHours(0, 0, 0, 0); d.setHours(0, 0, 0, 0);
d.setDate(d.getDate() - 1);
setCurrentWeekStart(d); setCurrentWeekStart(d);
}; };
@ -3752,9 +3750,7 @@ export default function WeeklyView() {
) : syncError ? ( ) : syncError ? (
<AlertCircle size={14} className="text-red-500" /> <AlertCircle size={14} className="text-red-500" />
) : null} ) : null}
<span>KW {getWeekNumber((() => { const days = getVisibleDays(); const mid = days[Math.floor(days.length / 2)] || currentWeekStart; return mid; })()).toString().padStart(2, "0")}</span> <span style={{ whiteSpace: "nowrap", fontSize: "0.8rem" }}>KW{getWeekNumber((() => { const days = getVisibleDays(); const mid = days[Math.floor(days.length / 2)] || currentWeekStart; return mid; })()).toString().padStart(2, "0")}/{(() => { const days = getVisibleDays(); const mid = days[Math.floor(days.length / 2)] || currentWeekStart; return mid; })().getFullYear()}</span>
<span className="text-gray-400">|</span>
<span>{(() => { const days = getVisibleDays(); const mid = days[Math.floor(days.length / 2)] || currentWeekStart; return mid; })().getFullYear()}</span>
</div> </div>
{/* Right: Settings + Overflow */} {/* Right: Settings + Overflow */}