Popover datepicker optimization

packages/components/src/components/DatePicker/DatePicker.module.scss

@@ -1,3 +1,5 @@
 .calendar {
-  padding: var(--popover--padding--m);
+  &:not(.small) {
+    padding: var(--popover--padding--s);
+  }
 }

packages/components/src/components/DatePicker/DatePicker.tsx

@@ -12,6 +12,7 @@ import {
 import { Calendar } from "@/components/Calendar";
 import { useFieldComponent } from "@/lib/hooks/useFieldComponent";
 import styles from "./DatePicker.module.scss";
+import { getBodyInnerWidth } from "@/lib/dom/getBodyInnerWidth";
 
 export interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>
   extends
@@ -32,6 +33,11 @@ export const DatePicker = flowComponent("DatePicker", (props) => {
 
   const rootClassName = clsx(fieldProps.className, className);
 
+  const calendarClassName = clsx(
+    styles.calendar,
+    getBodyInnerWidth() < 300 && styles.small,
+  );
+
   return (
     <Aria.DatePicker
       {...rest}
@@ -56,7 +62,7 @@ export const DatePicker = flowComponent("DatePicker", (props) => {
           isDialogContent
           controller={popoverController}
         >
-          <Calendar className={styles.calendar} />
+          <Calendar className={calendarClassName} />
         </Popover>
       </FieldErrorCaptureContext>
       <FieldErrorView />

packages/components/src/components/Popover/components/PopoverContent/PopoverContent.tsx

@@ -2,6 +2,7 @@ import type { FC, PropsWithChildren, Ref, RefObject } from "react";
 import * as Aria from "react-aria-components";
 import styles from "../../Popover.module.scss";
 import type { PropsWithClassName } from "@/lib/types/props";
+import { getBodyInnerWidth } from "@/lib/dom/getBodyInnerWidth";
 
 export interface PopoverContentProps
   extends PropsWithChildren, PropsWithClassName {
@@ -38,7 +39,7 @@ export const PopoverContent: FC<PopoverContentProps> = (props) => {
       ref={ref}
       isOpen={isOpen}
       onOpenChange={onOpenChange}
-      style={{ width }}
+      style={{ width, maxWidth: getBodyInnerWidth() }}
     >
       {withTip && (
         <Aria.OverlayArrow className={styles.tip}>

packages/components/src/lib/dom/getBodyInnerWidth.ts

@@ -0,0 +1,11 @@
+export const getBodyInnerWidth = () => {
+  if (typeof window === "undefined") {
+    return 0;
+  }
+  const bodyStyles = window.getComputedStyle(document.body);
+  return (
+    document.documentElement.clientWidth -
+    parseFloat(bodyStyles.paddingLeft) -
+    parseFloat(bodyStyles.paddingRight)
+  );
+};