calendar

commit 7ba8cad0919f18458e431bac31df9e34efbf9d8c
parent f351212acfe37f6a9f5ad5560f6a7c0dbb004779
Author: Julian Piribauer <julian.piribauer@gmail.com>
Date:   Fri,  1 May 2026 21:31:17 +0000

Changing layout

Diffstat:
M
static/app.js
 | 
8
+++++---
M
static/style.css
 | 
18
+++++++++++++++---

2 files changed, 20 insertions(+), 6 deletions(-)
diff --git a/static/app.js b/static/app.js
@@ -271,9 +271,11 @@ const calendarMain   = document.querySelector('.calendar-main');
 const monthlyViewEl  = document.querySelector('.monthly-view');
 
 function updateMonthlyVisibility() {
-  const open  = calendarMain.classList.contains('daily-open');
-  const avail = open ? calendarMain.clientWidth - 520 : Infinity;
-  monthlyViewEl.classList.toggle('monthly-hidden', open && avail < MONTHLY_MIN_W);
+  const open     = calendarMain.classList.contains('daily-open');
+  const avail    = open ? calendarMain.clientWidth - 420 : Infinity;
+  const collapse = open && avail < MONTHLY_MIN_W;
+  monthlyViewEl.classList.toggle('monthly-hidden', collapse);
+  calendarMain.classList.toggle('monthly-collapsed', collapse);
 }
 
 new ResizeObserver(updateMonthlyVisibility).observe(calendarMain);
diff --git a/static/style.css b/static/style.css
@@ -202,7 +202,7 @@ body {
 
 /* Symmetric margins + max-width only when the daily panel is closed */
 .calendar-main:not(.daily-open) .monthly-view {
-  max-width: 1200px;
+  max-width: 1000px;
   margin: 0 auto;
 }
 
@@ -327,11 +327,16 @@ body {
               border-color 0.35s;
 }
 .daily-open .daily-view {
-  flex: 0 0 520px;
-  max-width: 520px;
+  flex: 0 0 420px;
+  max-width: 420px;
   opacity: 1;
   border-color: var(--polar3);
 }
+/* When monthly collapses, let daily fill all remaining width */
+.daily-open.monthly-collapsed .daily-view {
+  flex: 1 1 auto;
+  max-width: none;
+}
 
 .daily-header {
   display: flex;
@@ -346,6 +351,12 @@ body {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--snow3);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 0.75rem;
 }
 .btn-close {
   width: 28px;
@@ -638,6 +649,7 @@ textarea.form-input {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  flex-shrink: 0;
 }
 .btn-add-event {
   padding: 0.3rem 0.7rem;