fix #9: resize columns to indicate vertical scroll

components/Calendar.tsx

@@ -3,8 +3,9 @@ import { styleBuilder } from '@/util/styles'
 import { intervalTimeString, timeString } from '@/util/time'
 import { Interval, Respondent } from '@/util/types'
 import moment, { Moment } from 'moment-timezone'
-import { Dispatch, useCallback, useEffect, useState } from 'react'
+import { Dispatch, useCallback, useRef, useEffect, useState } from 'react'
 import styles from '../styles/components/Calendar.module.scss'
+import debounce from 'lodash/debounce';
 
 type BaseBaseProps = {
   timezone: string
@@ -40,6 +41,9 @@ type CalendarDay = {
   intervals: Interval[]
 }
 
+const defaultWidth = 80;
+
+
 export default function Calendar(props: Props) {
   const { timezone, currentTimezone, earliest, latest, type, datesType } = props
 
@@ -51,6 +55,10 @@ export default function Calendar(props: Props) {
   const [dragEnd, setDragEnd] = useState<number[] | null>(null)
   const [touching, setTouching] = useState(false)
 
+  const daysDiv = useRef<HTMLDivElement | null>(null);
+  const [width, setWidth] = useState<number>(defaultWidth);
+  const widthStyle = { width: `${width}px` };
+
   // updates dates on calendar
   const updateDates = useCallback(() => {
     if (datesType !== 'dates') return
@@ -372,6 +380,44 @@ export default function Calendar(props: Props) {
     return null
   }
 
+  // Function to calculate the adapted column width based on the area width and column count
+  function adaptColumnWidth(areaWidth: number, columnCount: number) {
+    let nFloor = Math.floor(areaWidth / defaultWidth);
+
+    if (columnCount * defaultWidth > areaWidth && nFloor > 1) {
+      // Increase the width of the columns such that the last column shown only fits halfway
+      return areaWidth / (nFloor - 0.5);
+    }
+    return defaultWidth;
+  }
+
+  // Function to fix the width of columns based on the container's size and number of columns
+  function fixWidth() {
+    if (daysDiv.current) {
+      const areaWidth = daysDiv.current.getBoundingClientRect().width;
+      const columnCount = daysDiv.current.children.length;
+
+      setWidth(adaptColumnWidth(areaWidth, columnCount));
+    }  
+  } 
+
+  // Debounce the resize handler
+  const debouncedFixWidth = useCallback(debounce(fixWidth, 100), [fixWidth]);
+
+  useEffect(() => {
+    // Call fixWidth once on mount
+    fixWidth();
+
+    // Add resize event listener with debounced function
+    window.addEventListener('resize', debouncedFixWidth);
+
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', debouncedFixWidth);
+      debouncedFixWidth.cancel(); // Cancel any pending debounced calls
+    };
+  }, [debouncedFixWidth]);
+
   return (
     <div className={styles.container}>
       {type === 'display' && touching && props.hoverInterval && (
@@ -418,7 +464,7 @@ export default function Calendar(props: Props) {
           ))}
       </div>
       <div className={styles.content}>
-        <div className={styles.days}>
+        <div className={styles.days} ref={daysDiv}>
           {calendarDays.map((day, i) => (
             <div
               className={styleBuilder([
@@ -432,7 +478,7 @@ export default function Calendar(props: Props) {
               ])}
               key={i}
             >
-              <div className={styles.heading}>
+              <div className={styles.heading} style={widthStyle}>
                 <h1>{day.moment.format('ddd')}</h1>
                 {datesType === 'dates' && <h2>{day.moment.format('MMM D')}</h2>}
               </div>
@@ -441,6 +487,7 @@ export default function Calendar(props: Props) {
                   data-index={interval.index}
                   data-i={i}
                   data-j={j}
+                  style={widthStyle}
                   className={styleBuilder([
                     styles.interval,
                     [styles.inactive, !interval.active],

package.json

@@ -19,6 +19,7 @@
     "eslint": "8.34.0",
     "eslint-config-next": "13.1.6",
     "firebase": "^9.17.1",
+    "lodash": "^4.17.21",
     "moment-timezone": "^0.5.41",
     "next": "13.1.6",
     "react": "18.2.0",
@@ -28,5 +29,8 @@
     "sass": "^1.58.0",
     "spacetime": "^7.4.1",
     "typescript": "4.9.5"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.7"
   }
 }

styles/components/Calendar.module.scss

@@ -121,7 +121,6 @@
           background: var(--white);
           border: 1px solid var(--light-gray);
           border-right-width: 0;
-          width: 80px;
           height: 80px;
           text-align: center;
           display: flex;
@@ -161,7 +160,6 @@
         > .interval {
           touch-action: none;
           background: var(--light-gray);
-          width: 80px;
           height: 8px;
           border-top: 1px solid var(--dim-white);
           border-left: 1px solid var(--dim-white);