Add support for small screens in the date range input

Author: frozenhelium

community-dashboard/app/components/DateRangeInput/index.tsx

@@ -131,6 +131,7 @@ function DateRangeInput<N extends NameType>(props: Props<N>) {
         endDate: undefined,
     });
     const [calendarMonthSelectionPopupClassName] = React.useState(randomString(16));
+    const [rangeInputClassName] = React.useState(randomString(16));
     const createdContainerRef = React.useRef<HTMLDivElement>(null);
     const popupRef = React.useRef<HTMLDivElement>(null);
 
@@ -167,6 +168,15 @@ function DateRangeInput<N extends NameType>(props: Props<N>) {
         [hideCalendar, calendarMonthSelectionPopupClassName],
     );
 
+    React.useEffect(() => {
+        if (showCalendar && window.innerWidth <= 528) {
+            const el = document.getElementsByClassName(
+                rangeInputClassName,
+            )?.[0];
+            el?.scrollIntoView(true);
+        }
+    }, [showCalendar, rangeInputClassName]);
+
     useBlurEffect(
         showCalendar,
         handlePopupBlur,
@@ -311,7 +321,7 @@ function DateRangeInput<N extends NameType>(props: Props<N>) {
                     </>
                 )}
                 actionsContainerClassName={actionsContainerClassName}
-                className={className}
+                className={_cs(rangeInputClassName, className)}
                 disabled={disabled}
                 error={error}
                 errorContainerClassName={errorContainerClassName}
@@ -395,23 +405,24 @@ function DateRangeInput<N extends NameType>(props: Props<N>) {
                             </RawButton>
                         ))}
                     </div>
-
-                    <Calendar
-                        onDateClick={handleCalendarDateClick}
-                        className={styles.calendar}
-                        monthSelectionPopupClassName={calendarMonthSelectionPopupClassName}
-                        dateRenderer={DateRenderer}
-                        rendererParams={dateRendererParams}
-                        initialDate={firstInitialDate}
-                    />
-                    <Calendar
-                        onDateClick={handleCalendarDateClick}
-                        className={styles.calendar}
-                        monthSelectionPopupClassName={calendarMonthSelectionPopupClassName}
-                        dateRenderer={DateRenderer}
-                        rendererParams={dateRendererParams}
-                        initialDate={secondInitialDate}
-                    />
+                    <div className={styles.calendars}>
+                        <Calendar
+                            onDateClick={handleCalendarDateClick}
+                            className={styles.calendar}
+                            monthSelectionPopupClassName={calendarMonthSelectionPopupClassName}
+                            dateRenderer={DateRenderer}
+                            rendererParams={dateRendererParams}
+                            initialDate={firstInitialDate}
+                        />
+                        <Calendar
+                            onDateClick={handleCalendarDateClick}
+                            className={styles.calendar}
+                            monthSelectionPopupClassName={calendarMonthSelectionPopupClassName}
+                            dateRenderer={DateRenderer}
+                            rendererParams={dateRendererParams}
+                            initialDate={secondInitialDate}
+                        />
+                    </div>
                 </Popup>
             )}
         </>

community-dashboard/app/components/DateRangeInput/styles.css

@@ -48,10 +48,14 @@
         max-width: unset!important;
         max-height: unset!important;
 
-        .calendar {
-            --padding: var(--spacing-medium);
-            width: calc(var(--width-calendar-date) * 7 + 2 * var(--padding));
-            height: 100%;
+        .calendars {
+            display: flex;
+
+            .calendar {
+                --padding: var(--spacing-medium);
+                width: calc(var(--width-calendar-date) * 7 + 2 * var(--padding));
+                height: 100%;
+            }
         }
 
         .predefined-options {
@@ -71,6 +75,45 @@
             }
         }
     }
+
+    @media screen and (max-width: 50rem) {
+        height: auto;
+
+        .popup-content {
+            flex-wrap: wrap;
+
+            .calendars {
+                order: 1;
+
+                .calendar {
+                    flex-grow: 1;
+                    width: auto;
+                    height: unset;
+                }
+            }
+
+            .predefined-options {
+                flex-direction: row;
+                flex-wrap: wrap;
+                order: 2;
+                text-align: initial;
+
+                .option {
+                    justify-content: unset;
+                    width: auto;
+                }
+            }
+
+        }
+    }
+
+    @media screen and (max-width: 33rem) {
+        .popup-content {
+            .calendars {
+                flex-wrap: wrap;
+            }
+        }
+    }
 }
 
 .calendar-date {