responsive elements & design dark mode page turns

app/component/TimePickerField.js

@@ -14,7 +14,7 @@ function TimePickerField({
   const [value, setValue] = useState("00:00");
 
   return (
-    <div className="w-full relative">
+    <div className="w-full relative field-date-picker">
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
           ampm={false}

app/component/TimePickerInput.js

@@ -5,7 +5,7 @@ import { handleTwoLength } from "@/helper";
 
 function TimePickerInput({ changeData, handleDisableHours, name, data }) {
   return (
-    <div className="w-full relative">
+    <div className="w-full relative field-date-picker">
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
           ampm={false}
@@ -47,7 +47,7 @@ function TimePickerInput({ changeData, handleDisableHours, name, data }) {
           }}
         />
         <p
-          className="absolute dark:bg-[#222433] dark:!text-[#A1A1A1] flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
+          className="absolute dark:bg-[#1F1D2B] md:dark:bg-[#222433] dark:!text-[#A1A1A1] flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
             w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2"
         >
           {data[name]}

app/globals.css

@@ -235,6 +235,13 @@ html {
   font-weight: 700;
 }
 
+@media (min-width: 768px) {
+  .MuiModal-root .MuiBox-root {
+    max-height: calc(100vh - 48px) !important;
+    overflow: auto !important;
+  }
+}
+
 @keyframes openx {
   0% {
     width: 0;
@@ -668,6 +675,12 @@ html {
   width: 300px !important;
 }
 
+@media (max-width: 768px) {
+  .panel-jalaali {
+    width: 300px !important;
+  }
+}
+
 .day-label-bar,
 .panel-header-inner,
 .days-body {
@@ -723,3 +736,7 @@ html {
   font-weight: 400 !important;
   color: #a1a1a1 !important;
 }
+
+.dark .field-date-picker svg path {
+  fill: #a1a1a1;
+}

app/theme/theme.js

@@ -24,7 +24,7 @@ const theme = createTheme({
       styleOverrides: {
         root: {
           "& .MuiBox-root": {
-            maxHeight: "calc(100vh - 48px)",
+            // maxHeight: { lg: "calc(100vh - 48px)" },
             overflow: "auto",
           },
         },