nate/homeschool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow planner cells to grow vertically instead of fixed height

Browse Source 
Cells now expand to show all tasks rather than clipping with overflow:hidden.
Column widths stay equal (CSS grid 1fr) — only height is flexible.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-07-27 16:58:25 -04:00
1 parent 5bca261bf1
commit ac7b86b470
1 file changed
+3 -3
Download Patch File Download Diff File Expand all files Collapse all files
public/styles.css
+3 -3
View File
@@ -461,7 +461,7 @@ button.tiny { font-size: 0.75rem; padding: 0.15rem 0.5rem; }
.week-label { font-weight: 700; } .week-label { font-weight: 700; }
/* planner week view */ /* planner week view */
.planner-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; margin-top: 1rem; } .planner-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; margin-top: 1rem; }
.planner-day { background: var(--card); border-radius: 14px; padding: 0.85rem; box-shadow: 0 2px 8px rgba(45, 49, 66, 0.06); height: 240px; display: flex; flex-direction: column; overflow: hidden; } .planner-day { background: var(--card); border-radius: 14px; padding: 0.85rem; box-shadow: 0 2px 8px rgba(45, 49, 66, 0.06); min-height: 120px; display: flex; flex-direction: column; }
.planner-day h3 { font-size: 0.95rem; margin-bottom: 0.5rem; } .planner-day h3 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.planner-day h3 small { display: block; font-weight: 400; color: var(--muted); } .planner-day h3 small { display: block; font-weight: 400; color: var(--muted); }
@@ -470,7 +470,7 @@ button.tiny { font-size: 0.75rem; padding: 0.15rem 0.5rem; }
.planner-month-header { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-bottom: 3px; } .planner-month-header { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-bottom: 3px; }
.planner-month-header div { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--muted); padding: 0.2rem 0; } .planner-month-header div { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--muted); padding: 0.2rem 0; }
.planner-month-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-bottom: 3px; } .planner-month-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-bottom: 3px; }
.planner-day-compact { border-radius: 8px; padding: 0.5rem; height: 100px; display: flex; flex-direction: column; overflow: hidden; } .planner-day-compact { border-radius: 8px; padding: 0.5rem; min-height: 60px; display: flex; flex-direction: column; }
.planner-day-compact h3 { font-size: 0.75rem; margin-bottom: 0.3rem; } .planner-day-compact h3 { font-size: 0.75rem; margin-bottom: 0.3rem; }
.planner-day-compact .planner-task { font-size: 0.72rem; padding: 0.2rem 0.4rem; } .planner-day-compact .planner-task { font-size: 0.72rem; padding: 0.2rem 0.4rem; }
.planner-day-compact .planner-task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; } .planner-day-compact .planner-task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; }
@@ -478,7 +478,7 @@ button.tiny { font-size: 0.75rem; padding: 0.15rem 0.5rem; }
/* view toggle active state */ /* view toggle active state */
.secondary.active-view { background: var(--accent); color: #fff; } .secondary.active-view { background: var(--accent); color: #fff; }
.planner-tasks { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; min-height: 1.5rem; flex: 1; overflow-y: auto; min-height: 0; } .planner-tasks { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; min-height: 1.5rem; }
.planner-task { .planner-task {
display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; display: flex; justify-content: space-between; align-items: center; gap: 0.4rem;
background: #f7f2e3; border-radius: 8px; padding: 0.4rem 0.6rem; font-size: 0.85rem; background: #f7f2e3; border-radius: 8px; padding: 0.4rem 0.6rem; font-size: 0.85rem;