responsive elements & design dark mode page turns

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]}