@dexteel/mesf-core 4.26.0 → 4.26.1

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "4.26.0"
+  ".": "4.26.1"
 }

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# Changelog
+
+## [4.26.1](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v4.26.0...@dexteel/mesf-core-v4.26.1) (2025-03-06)
+
+
+### Bug Fixes
+
+* **Shift Period Navigator:** Use cssGrid instead of Flexbox to improve responsiveness ([f90e120](https://github.com/dexteel/mesf-core-frontend/commit/f90e120c140e15209c976963ae62aa56636fa789))
+* **Shift Period Navigator:** Use cssGrid instead of Flexbox to improve responsiveness ([b645194](https://github.com/dexteel/mesf-core-frontend/commit/b6451942fddeb3f25d4dc01bf48224a3c6ee5c22))
+
+## [4.26.0] - 2025-03-05
+
+
+
 # Changelog
 
 ## [4.26.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v4.25.2...@dexteel/mesf-core-v4.26.0) (2025-03-05)

package/dist/index.esm.js

@@ -8337,43 +8337,42 @@ var getShiftsRangeByParameters = function (period, Start, End, StartShiftId, End
     });
 };
 
-var useStyles$7 = makeStyles(function (theme) {
-    var _a, _b, _c;
-    return ({
-        container: {
-            display: "flex",
-            alignItems: "center",
-            width: "100%",
-            margin: 0,
-            padding: "8px 0",
-            gap: "8px",
-            flexWrap: "wrap"
+var useStyles$7 = makeStyles(function (theme) { return ({
+    container: {
+        display: "grid",
+        gridTemplateColumns: "auto minmax(100px, 1fr) 80px minmax(100px, 1fr) auto auto",
+        alignItems: "center",
+        width: "100%",
+        margin: 0,
+        padding: "8px 0",
+        gap: "8px"
+    },
+    gridItem: {
+        display: "flex",
+        alignItems: "center"
+    },
+    datePickerWrapper: {
+        minWidth: "100px",
+        fontSize: ".8rem!important",
+        margin: "0!important",
+        "& .MuiInputAdornment-root": {
+            margin: "0!important"
         },
-        gridItem: (_a = {
-                display: "flex",
-                alignItems: "center"
-            },
-            _a[theme.breakpoints.down("sm")] = {
-                width: "100%"
-            },
-            _a),
-        datePickerWrapper: (_b = {
-                flex: 1,
-                minWidth: "150px"
-            },
-            _b[theme.breakpoints.down("sm")] = {
-                minWidth: "100%"
-            },
-            _b),
-        selectWrapper: (_c = {
-                width: "120px"
-            },
-            _c[theme.breakpoints.down("sm")] = {
-                width: "100%"
-            },
-            _c)
-    });
-});
+        "& .MuiInputBase-input": {
+            fontSize: "1rem!important",
+            padding: "4px 8px !important"
+        }
+    },
+    selectWrapper: {
+        width: "80px",
+        "& .MuiInputBase-input": {
+            fontSize: "0.8rem !important",
+            padding: "4px 8px !important",
+            display: "inline-flex",
+            alignItems: "center"
+        }
+    }
+}); });
 var DEFAULT_PERIOD_OPTIONS = [
     { value: "Shift", label: "Shift" },
     { value: "Day", label: "Day" },
@@ -8561,7 +8560,7 @@ var ShiftPeriodNavigatorControl = function (_a) {
             React__default.createElement(DatePicker$1, { label: "Start", format: dateFormat, value: moment((startShift === null || startShift === void 0 ? void 0 : startShift.Start) || moment().subtract(1, "day")), onChange: function (value) {
                     return handleDateChange(value ? moment(value) : null, "start");
                 }, disabled: loadingShiftPeriodList, slots: {
-                    textField: function (props) { return (React__default.createElement(TextField, __assign({}, props, { size: "small", variant: "outlined", fullWidth: true, style: { width: "100%" }, InputProps: __assign(__assign({}, props.InputProps), { style: { height: "50px", paddingTop: "2px" } }) }))); },
+                    textField: function (props) { return (React__default.createElement(TextField, __assign({}, props, { size: "small", variant: "outlined", fullWidth: true, style: { width: "100%" }, InputProps: __assign(__assign({}, props.InputProps), { style: { paddingTop: "2px" } }) }))); },
                     openPickerIcon: function () { return (React__default.createElement("div", { style: {
                             display: "flex",
                             alignItems: "center",
@@ -8573,23 +8572,23 @@ var ShiftPeriodNavigatorControl = function (_a) {
                 } })),
         React__default.createElement("div", { className: "".concat(classes.gridItem, " ").concat(classes.selectWrapper) },
             React__default.createElement(FormControl, { variant: "outlined", size: "small", fullWidth: true },
-                React__default.createElement(Select, { value: period, onChange: handleChangeScope, disabled: loadingShiftPeriodList, style: {
-                        height: "50px",
-                        width: "100%",
-                        paddingBottom: 0
+                React__default.createElement(InputLabel, { id: "period-select-label" }, "Period"),
+                React__default.createElement(Select, { value: period, onChange: handleChangeScope, disabled: loadingShiftPeriodList, label: "Period", labelId: "period-select-label", style: {
+                        width: "100%"
                     } }, periodOptions.map(function (option) { return (React__default.createElement(MenuItem, { key: option.value, value: option.value }, option.label)); })))),
         React__default.createElement("div", { className: "".concat(classes.gridItem, " ").concat(classes.datePickerWrapper) },
             React__default.createElement(DatePicker$1, { label: "End", format: dateFormat, value: moment((endShift === null || endShift === void 0 ? void 0 : endShift.Start) || moment().subtract(1, "day")), onChange: function (value) {
                     return handleDateChange(value ? moment(value) : null, "end");
                 }, disabled: loadingShiftPeriodList, slots: {
-                    textField: function (props) { return (React__default.createElement(TextField, __assign({}, props, { size: "small", variant: "outlined", fullWidth: true, style: { width: "100%" }, InputProps: __assign(__assign({}, props.InputProps), { style: { height: "50px", paddingTop: "2px" } }) }))); },
+                    textField: function (props) { return (React__default.createElement(TextField, __assign({}, props, { size: "small", variant: "outlined", fullWidth: true, style: { width: "100%" }, InputProps: __assign(__assign({}, props.InputProps), { style: { paddingTop: "2px" } }) }))); },
                     openPickerIcon: function () { return (React__default.createElement("div", { style: {
                             display: "flex",
                             alignItems: "center",
+                            margin: "0 !important",
                             width: "100%"
                         } },
                         renderShiftCrewInfo(endShift),
-                        React__default.createElement(IconButton$1, { style: { padding: "4px", flexShrink: 0 } },
+                        React__default.createElement(IconButton$1, { style: { padding: "0px", flexShrink: 0 } },
                             React__default.createElement(CalendarIcon, null)))); }
                 } })),
         React__default.createElement("div", { className: classes.gridItem },