Updated October 2025 Menu + Fixed Breakfast Header Overflow Issue + Fixed Content Overflow Issue

main.css

@@ -61,7 +61,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 0.75rem;
     color: #e2e2e2;
 }
 
@@ -139,8 +139,8 @@ body {
 /* Banners */
 
 .banner {
-    margin-top: 1rem;
-    padding: 0.5rem 1rem;
+    margin-top: 0.75rem; 
+    padding: 0.35rem 0.75rem; 
     border-radius: 10px;
     color: hsl(223deg, 75%, 75%);
 }
@@ -153,7 +153,7 @@ body {
 
 .banner__content {
     position: relative;
-    padding: 0.5rem;
+    padding: 0.35rem; 
     text-align: center;
 }
 
@@ -234,7 +234,7 @@ body {
         --scrollbar-thumb-color: #363636;
         width: 100%;
         flex-direction: row;
-        align-items: center;
+        align-items: flex-start; 
         font-size: 1.25em;
         padding: 0;
 
@@ -263,6 +263,12 @@ body {
     --accent-hue: var(--hue-lunch);
     --accent: var(--lunch-accent);
 }
+
+
+#L .menu-category__header {
+    flex-shrink: 0; 
+    min-height: 3rem; 
+}
 #S, #S + .share_toolbar {
     --accent-hue: var(--hue-snacks);
     --accent: var(--snacks-accent);
@@ -276,7 +282,7 @@ body {
     font-size: 1.2em;
     color: var(--accent);
     background-color: inherit;
-    padding-top: 1em;
+    padding-top: 1em; 
 }
 
 @media (min-width: 720px) {
@@ -286,7 +292,8 @@ body {
         width: 50%;
         flex: 0 0 auto;
 
-        padding: 0.5em 0;
+        padding: 0.5em 0; 
+        align-self: flex-start; 
     }
 }
 
@@ -301,34 +308,52 @@ body {
     background-color: inherit;
     border: 1px solid var(--accent);
     border-radius: 0.5em;
-    margin: 0 0.5rem;
+    margin: 0 0.5rem; 
 }
 
 .menu-category-inner > * {
-    padding: 0.5rem;
+    padding: 0.35rem; 
+}
+
+.menu__items {
+    overflow-y: visible;
 }
 
 @media (min-width: 720px) {
     .menu-category-inner {
         height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .menu__items {
+        flex: 1;
+        overflow-y: visible;
     }
 }
 
 .menu-category__header {
     text-transform: uppercase;
     color: var(--accent);
 
-    display: grid;
-    grid-auto-flow: row;
-    grid-template-rows: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     text-align: center;
 
     border-bottom: 1px solid var(--accent);
+    padding: 0.5rem 0.25rem 0.35rem 0.25rem; 
+    min-height: 3rem; 
+    gap: 0.25rem; 
 }
 
 .meal-name {
     font-weight: 700;
-    letter-spacing: 0.3em;
+    letter-spacing: 0.2em; 
+    font-size: 0.9em;
+    word-break: break-word; 
+    hyphens: auto; 
 }
 
 .meal-timing {
@@ -337,6 +362,7 @@ body {
     display: inline-block;
     font-weight: 300;
     font-size: 0.5em;
+    margin-bottom: 0.15rem; 
 }
 
 .menu__item {

main.js

@@ -136,6 +136,15 @@ async function loadMenu() {
         const hiddenInput = document.querySelector("#input--date");
         hiddenInput.showPicker();
     };
+
+    // Add window resize listener for desktop height adjustments
+    window.addEventListener('resize', () => {
+        // Debounce resize events
+        clearTimeout(window.resizeTimeout);
+        window.resizeTimeout = setTimeout(() => {
+            adjustMealHeightsForDesktop();
+        }, 100);
+    });
 })();
 
 /**
@@ -161,6 +170,9 @@ function initializeMenuUI(date) {
             ...everydayItems.map(everydayItemHTML),
         ].join("");
     }
+
+    // Adjust meal heights for desktop screens
+    adjustMealHeightsForDesktop();
 }
 
 function variableItemHTML(item_name) {
@@ -272,3 +284,79 @@ function addDays(date, numDays) {
     const oneDayMs = 1000 * 60 * 60 * 24;
     return new Date(date.getTime() + oneDayMs * numDays);
 }
+
+/**
+ * Adjust meal heights for desktop screens to ensure all items fit within meal outlines.
+ * Only applies to screens 720px and wider.
+ */
+function adjustMealHeightsForDesktop() {
+    // Only apply on desktop screens (720px and wider)
+    if (window.innerWidth < 720) {
+        // On mobile screens, ensure scrolling is always enabled
+        document.querySelector('#page').style.overflow = 'auto';
+        document.querySelector('#actual-menu').style.overflow = 'auto';
+        return;
+    }
+
+    const mealCategories = ['B', 'L', 'S', 'D'];
+    const menuContainer = document.querySelector('#actual-menu');
+    const dayPicker = document.querySelector('.day-picker');
+
+    // Calculate available height (total viewport height minus day picker)
+    const availableHeight = window.innerHeight - dayPicker.offsetHeight;
+
+    // Reset heights to auto to measure natural content height
+    mealCategories.forEach(mealId => {
+        const mealElement = document.getElementById(mealId);
+        const mealInner = mealElement.querySelector('.menu-category-inner');
+        mealElement.style.height = 'auto';
+        mealInner.style.height = 'auto';
+    });
+
+    // Find the maximum content height needed
+    let maxContentHeight = 0;
+    mealCategories.forEach(mealId => {
+        const mealElement = document.getElementById(mealId);
+        const contentHeight = mealElement.scrollHeight;
+        maxContentHeight = Math.max(maxContentHeight, contentHeight);
+    });
+
+    // Add a small tolerance buffer to account for padding/margins/spacing
+    const toleranceBuffer = 20; // 20px tolerance for minor spacing differences
+    const adjustedAvailableHeight = availableHeight + toleranceBuffer;
+
+    // If content exceeds available height, adjust all meals equally
+    if (maxContentHeight > adjustedAvailableHeight) {
+        // Add bottom spacing buffer only when we need to extend meal boxes
+        const bottomSpacingBuffer = 2; // 2rem buffer for bottom spacing
+        maxContentHeight += bottomSpacingBuffer;
+        const adjustedHeight = Math.max(availableHeight, maxContentHeight);
+
+        mealCategories.forEach(mealId => {
+            const mealElement = document.getElementById(mealId);
+            const mealInner = mealElement.querySelector('.menu-category-inner');
+
+            mealElement.style.height = adjustedHeight + 'px';
+            mealElement.style.alignSelf = 'flex-start'; // Ensure top alignment
+            mealInner.style.height = '100%';
+        });
+
+        // Enable main scrollbar when content overflows
+        document.querySelector('#page').style.overflow = 'auto';
+        document.querySelector('#actual-menu').style.overflow = 'auto';
+    } else {
+        // Reset to default behavior if no adjustment needed
+        mealCategories.forEach(mealId => {
+            const mealElement = document.getElementById(mealId);
+            const mealInner = mealElement.querySelector('.menu-category-inner');
+
+            mealElement.style.height = '';
+            mealElement.style.alignSelf = '';
+            mealInner.style.height = '';
+        });
+
+        // On desktop, disable main scrollbar when content fits
+        document.querySelector('#page').style.overflow = 'hidden';
+        document.querySelector('#actual-menu').style.overflow = 'hidden';
+    }
+}

menu.json

@@ -1,12 +1,12 @@
 {
-    "start": "09/29/2025",
-    "end": "12/29/2025",
+    "start": "09/28/2025",
+    "end": "11/01/2025",
     "menu": {
         "rotation": {
             "D1": {
                 "B": ["Idli", "Sambhar + Chutney"],
                 "L": [
-                    "Parwal Dry",
+                    "Aloo Capsicum",
                     "Veg Kolhapuri",
                     "Dal Makhni",
                     "Rasam",
@@ -48,7 +48,7 @@
                 "S": ["Kachori"],
                 "D": [
                     "Soya Keema Masala",
-                    "Chhole Kulche",
+                    "Chole Kulche",
                     "Dal Tadka",
                     "Plain Rice",
                     "Chapati",
@@ -61,7 +61,7 @@
                 "B": ["Aloo Paratha", "Curd"],
                 "L": [
                     "Bhindi Masala Dry",
-                    "Kadhi Pakode",
+                    "Kadi Pakode",
                     "Dal Tadka",
                     "Rasam",
                     "Chapati",
@@ -73,9 +73,9 @@
                 ],
                 "S": ["Dabeli"],
                 "D": [
-                    "Paneer Biriyani",
-                    "Chicken Biriyani",
                     "Aloo Beans Dry",
+                    "Paneer Biriyani",
+                    "Chicken Biryani",
                     "Dal Fry",
                     "Curd Rice",
                     "Chapati",
@@ -127,9 +127,9 @@
                 ],
                 "S": ["Masala Maggi"],
                 "D": [
+                    "Baigan Bharta",
                     "Paneer Butter Masala",
-                    "Chicken / Egg Curry",
-                    "Baingan Bharta",
+                    "Chicken/Egg Curry",
                     "Dal Tadka",
                     "Jeera Rice",
                     "Chapati + Paratha",
@@ -156,8 +156,8 @@
                 "S": ["Samosa"],
                 "D": [
                     "Onion & Tomato Uttapam",
-                    "Methi Malai Matar",
-                    "Dal Lasooni",
+                    "Methi Malai Mutter",
+                    "Dal Lahsuni",
                     "Masala Khichdi",
                     "Chapati",
                     "Rasam",