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

fix: thin resize handles and fix resizing for both areas

Browse Source 
- Use 1px border style instead of thick background bar
- Switch from maxHeight to height for proper resize control
- Fix overflow conflict in expanded someday CSS
- Both all-day and someday areas now properly resizable

v1.39.4

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
mARTin 2026-03-17 03:19:11 +01:00
parent 806061bf47
commit afa2695e0c
3 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "name": "my-weekly-todo-list",
"version": "1.39.3", "version": "1.39.4",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

34
src/app/globals.css
View File

@ -1196,8 +1196,7 @@ h3 {
} }
.weekly-someday.expanded { .weekly-someday.expanded {
max-height: none; overflow: auto;
overflow: visible;
} }
.weekly-someday-bar { .weekly-someday-bar {
@ -2657,7 +2656,7 @@ h3 {
/* Resize handle for draggable section borders */ /* Resize handle for draggable section borders */
.resize-handle { .resize-handle {
height: 12px; height: 7px;
cursor: ns-resize; cursor: ns-resize;
display: flex; display: flex;
align-items: center; align-items: center;
@ -2666,28 +2665,29 @@ h3 {
touch-action: none; touch-action: none;
position: relative; position: relative;
z-index: 10; z-index: 10;
background: var(--weekly-border, #e5e7eb); border-top: 1px solid var(--weekly-border, #e5e7eb);
border-bottom: 1px solid var(--weekly-border, #e5e7eb);
} }
.resize-handle:hover { .resize-handle:hover {
background: var(--weekly-accent, #3b82f6); background: rgba(59, 130, 246, 0.08);
opacity: 0.5; border-color: var(--weekly-accent, #3b82f6);
} }
.resize-handle:active { .resize-handle:active {
background: var(--weekly-accent, #3b82f6); background: rgba(59, 130, 246, 0.12);
opacity: 0.7; border-color: var(--weekly-accent, #3b82f6);
}
.resize-handle-bar {
width: 32px;
height: 2px;
border-radius: 1px;
background: var(--weekly-border, #e5e7eb);
opacity: 0.6;
transition: background 0.15s, opacity 0.15s;
} }
.resize-handle:hover .resize-handle-bar, .resize-handle:hover .resize-handle-bar,
.resize-handle:active .resize-handle-bar { .resize-handle:active .resize-handle-bar {
background: white; background: var(--weekly-accent, #3b82f6);
opacity: 0.9;
}
.resize-handle-bar {
width: 40px;
height: 3px;
border-radius: 2px;
background: var(--weekly-text-light, #999);
opacity: 0.5; opacity: 0.5;
transition: background 0.15s, opacity 0.15s;
} }
.all-day-events-header { .all-day-events-header {

4
src/components/WeeklyView.tsx
View File

@ -5218,7 +5218,7 @@ export default function WeeklyView() {
<> <>
<section <section
className={`all-day-events-section ${isAllDayExpanded ? "expanded" : "collapsed"}`} className={`all-day-events-section ${isAllDayExpanded ? "expanded" : "collapsed"}`}
style={isAllDayExpanded && allDayHeight ? { maxHeight: `${allDayHeight}px`, overflowY: 'auto' } : undefined} style={isAllDayExpanded && allDayHeight ? { height: `${allDayHeight}px`, overflowY: 'auto' } : undefined}
> >
<div style={{ display: "flex", flexDirection: "row" }}> <div style={{ display: "flex", flexDirection: "row" }}>
{showTimeGrid && ( {showTimeGrid && (
@ -7093,7 +7093,7 @@ export default function WeeklyView() {
<section <section
ref={somedaySectionRefCb} ref={somedaySectionRefCb}
className={`weekly-someday ${somedayExpanded ? "expanded" : "collapsed"} transition-colors duration-200`} className={`weekly-someday ${somedayExpanded ? "expanded" : "collapsed"} transition-colors duration-200`}
style={somedayExpanded && somedayHeight ? { maxHeight: `${somedayHeight}px`, overflowY: 'auto' } : undefined} style={somedayExpanded && somedayHeight ? { height: `${somedayHeight}px`, overflowY: 'auto' } : undefined}
> >
{/* Someday tabs bar */} {/* Someday tabs bar */}
<div className="someday-tabs-bar"> <div className="someday-tabs-bar">