fixes

Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css

@@ -1,18 +1,13 @@
-.maintenance-options {
-  > .MuiStack-root {
-    > .MuiStack-root.select-wrapper,
-    .field {
-      width: 380px;
-    }
-  }
+.maintenance-options .MuiStack-root .MuiStack-root.select-wrapper,
+.maintenance-options .MuiStack-root .field {
+  width: 60%;
+  max-width: 380px;
 }
 
-.date-picker,
-.time-picker {
-  .MuiOutlinedInput-root {
-    height: 34px;
-    font-size: var(--env-var-font-size-medium);
-  }
+.date-picker .MuiOutlinedInput-root,
+.time-picker .MuiOutlinedInput-root {
+  height: 34px;
+  font-size: var(--env-var-font-size-medium);
 }
 
 .date-picker .MuiOutlinedInput-root {
@@ -27,23 +22,28 @@
   width: 20px;
 }
 
-.duration-config {
-  .field-text .MuiTextField-root,
-  .field {
-    width: 70px;
-    min-width: 70px;
-    max-width: 70px;
-  }
-
-  > .MuiStack-root.select-wrapper {
-    width: 100px;
-
-    > .MuiInputBase-root:has(> .MuiSelect-select) {
-      min-width: 100px;
-    }
-  }
-
-  .select-wrapper .select-component > .MuiSelect-select {
-    text-transform: none;
-  }
+.duration-config .field-text .MuiTextField-root,
+.duration-config .field {
+  width: 70px;
+  min-width: 70px;
+  max-width: 70px;
+}
+
+.duration-config > .MuiStack-root.select-wrapper {
+  width: 100px;
+}
+
+.duration-config
+  > .MuiStack-root.select-wrapper
+  > .MuiInputBase-root:has(> .MuiSelect-select) {
+  width: 100px;
+  min-width: 100px;
+}
+
+.duration-config > .select-wrapper .select-component > .MuiSelect-select {
+  text-transform: none;
+}
+
+.maintenance-options .add-monitors-fields .field.field-text {
+  width: 100%;
 }

Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx

@@ -47,10 +47,10 @@ const configOptionTitle = (title, description) => {
 };
 
 const timeFrames = [
-  { _id: "seconds", name: "seconds" },
-  { _id: "minutes", name: "minutes" },
-  { _id: "hours", name: "hours" },
-  { _id: "days", name: "days" },
+  { _id: 1, name: "seconds" },
+  { _id: 2, name: "minutes" },
+  { _id: 3, name: "hours" },
+  { _id: 4, name: "days" },
 ];
 
 const sxButtons = {
@@ -64,8 +64,8 @@ const CreateNewMaintenanceWindow = () => {
     date: dayjs(),
     startTime: dayjs(),
     duration: {
-      value: "60",
-      unit: "minutes",
+      magnitude: "",
+      unit: 1,
     },
     friendlyName: "",
     AddMonitors: "",
@@ -133,8 +133,8 @@ const CreateNewMaintenanceWindow = () => {
           <Field
             id="duration-value"
             placeholder="60"
-            onChange={(e) => handleChange(e, "duration")}
-            value={values.duration.value}
+            onChange={(e) => handleChange(e, "duration.magnitude")}
+            value={values["duration.unit"]}
           />
           <Select
             onChange={(e) => handleChange(e, "duration.unit")}
@@ -159,7 +159,11 @@ const CreateNewMaintenanceWindow = () => {
     {
       title: "Add monitors",
       component: (
-        <Stack gap={2}>
+        <Stack
+          className="add-monitors-fields"
+          sx={{ width: "60%", maxWidth: "380px" }}
+          gap={2}
+        >
           <Field
             id="add-monitors"
             placeholder="Start typing to search for current monitors"