fix: Responsive calendar

packages/@react-spectrum/s2/src/Calendar.tsx

@@ -77,7 +77,15 @@ const calendarStyles = style({
   flexDirection: 'column',
   gap: 24,
   width: 'fit',
-  disableTapHighlight: true
+  disableTapHighlight: true,
+  '--cell-gap': {
+    type: 'paddingStart',
+    value: 4
+  },
+  '--cell-min-width': {
+    type: 'width',
+    value: 32
+  }
 }, getAllowedOverrides());
 
 const headerStyles = style({
@@ -121,10 +129,7 @@ const headerCellStyles = style({
 
 const cellStyles = style({
   outlineStyle: 'none',
-  '--cell-gap': {
-    type: 'paddingStart',
-    value: 4
-  },
+  boxSizing: 'content-box',
   paddingStart: {
     default: 4,
     isFirstChild: 0
@@ -142,15 +147,20 @@ const cellStyles = style({
     isLastWeek: 0
   },
   position: 'relative',
-  width: 32,
-  height: 32,
   display: {
     default: 'flex',
     isOutsideMonth: 'none'
   },
   alignItems: 'center',
   justifyContent: 'center',
-  disableTapHighlight: true
+  disableTapHighlight: true,
+  '--cell-min-width': {
+    type: 'width',
+    value: 32
+  },
+  width: '[min(var(--cell-min-width), calc((100cqw / 7) - var(--cell-gap)))]',
+  aspectRatio: 'square',
+  height: 'auto'
 });
 
 const cellInnerStyles = style<CalendarCellRenderProps & {selectionMode: 'single' | 'range'}>({
@@ -174,7 +184,7 @@ const cellInnerStyles = style<CalendarCellRenderProps & {selectionMode: 'single'
   font: 'body-sm',
   cursor: 'default',
   width: 'full',
-  height: 32,
+  height: 'full',
   borderRadius: 'full',
   display: 'flex',
   alignItems: 'center',
@@ -450,7 +460,23 @@ export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
                 alignItems: 'start'
               })}>
               {Array.from({length: visibleMonths}).map((_, i) => (
-                <CalendarGrid months={i} key={i} />
+                <div
+                  key={i}
+                  style={{'--visible-months': visibleMonths} as React.CSSProperties}
+                  className={style({
+                    containerType: 'inline-size',
+                    flexGrow: 1,
+                    flexShrink: 0,
+                    flexBasis: '0%',
+                    minWidth: 0,
+                    width: 'calc(7 * var(--cell-min-width) + var(--cell-gap) * 12)',
+                    maxWidth: {
+                      default: 'calc(100vw / var(--visible-months))',
+                      '@media (max-width: 375px)': '100%'
+                    }
+                  })}>
+                  <CalendarGrid months={i} />
+                </div>
               ))}
             </div>
             {isInvalid && (
@@ -476,7 +502,8 @@ export const CalendarGrid = (props: Omit<AriaCalendarGridProps, 'children'> & Pr
       className={style({
         borderCollapse: 'collapse',
         borderSpacing: 0,
-        isolation: 'isolate'
+        isolation: 'isolate',
+        width: 'full'
       })}
       offset={{months: props.months}}>
       <CalendarGridHeader className="">
@@ -648,11 +675,8 @@ const CalendarCellInner = (props: Omit<CalendarCellProps, 'children'> & {isRange
     <div
       className={style({
         position: 'relative',
-        width: 32,
-        '--cell-width': {
-          type: 'width',
-          value: '[self(width)]'
-        }
+        width: 'full',
+        height: 'full'
       })}>
       <div
         ref={ref}

packages/@react-spectrum/s2/src/RangeCalendar.tsx

@@ -19,7 +19,7 @@ import {CalendarButton, CalendarGrid, CalendarHeading} from './Calendar';
 import ChevronLeftIcon from '../s2wf-icons/S2_Icon_ChevronLeft_20_N.svg';
 import ChevronRightIcon from '../s2wf-icons/S2_Icon_ChevronRight_20_N.svg';
 import {ContextValue, Provider} from 'react-aria-components/utils';
-import {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';
+import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode} from 'react';
 import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {Header, HeaderContext, HeadingContext} from './Content';
@@ -53,7 +53,15 @@ const calendarStyles = style({
   display: 'flex',
   flexDirection: 'column',
   gap: 24,
-  width: 'fit'
+  width: 'fit',
+  '--cell-gap': {
+    type: 'paddingStart',
+    value: 4
+  },
+  '--cell-min-width': {
+    type: 'width',
+    value: 32
+  }
 }, getAllowedOverrides());
 
 const headerStyles = style({
@@ -108,7 +116,23 @@ export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
                 alignItems: 'start'
               })}>
               {Array.from({length: visibleMonths}).map((_, i) => (
-                <CalendarGrid months={i} key={i} />
+                <div
+                  key={i}
+                  style={{'--visible-months': visibleMonths} as CSSProperties}
+                  className={style({
+                    containerType: 'inline-size',
+                    flexGrow: 1,
+                    flexShrink: 0,
+                    flexBasis: '0%',
+                    minWidth: 0,
+                    width: 'calc(7 * var(--cell-min-width) + var(--cell-gap) * 12)',
+                    maxWidth: {
+                      default: 'calc(100vw / var(--visible-months))',
+                      '@media (max-width: 375px)': '100%'
+                    }
+                  })}>
+                  <CalendarGrid months={i} />
+                </div>
               ))}
             </div>
             {isInvalid && (