@opengeoweb/taf 4.12.0 → 4.13.1

package/index.esm.js

@@ -7,12 +7,13 @@ import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
 import { useAuthenticationContext } from '@opengeoweb/authentication';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
-import { HIDDEN_INPUT_HELPER_IS_DRAFT, useIsMounted, CustomTooltip, ToolContainerDraggable, Avatar, getInitials, ToggleMenu, useConfirmationDialog, useDraftFormHelpers, usePreventBrowserClose, ToolButton, ToolHeader, AlertBanner, getErrorMessage as getErrorMessage$1, getWarningMessage, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
+import { HIDDEN_INPUT_HELPER_IS_DRAFT, useIsMounted, CustomTooltip, ToolContainerDraggable, Avatar, getInitials, IS_JEST, ToggleMenu, useConfirmationDialog, useDraftFormHelpers, usePreventBrowserClose, ToolButton, ToolHeader, AlertBanner, getErrorMessage as getErrorMessage$1, getWarningMessage, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
 import { snackbarActions } from '@opengeoweb/core';
 import moment from 'moment';
 import { isEqual } from 'lodash';
 import { DragHandle as DragHandle$1, ThumbsUp, Add, Delete, Close, Clock, Cancel, Success, Edit, Export, ListItem, Cached } from '@opengeoweb/theme';
 import ReactDOM from 'react-dom';
+import { useTheme } from '@emotion/react';
 import { useApiContext, createApiInstance, createFakeApiInstance, ApiProvider } from '@opengeoweb/api';
 import LinearProgress from '@mui/material/LinearProgress';
 import Box$1 from '@mui/material/Box';
@@ -322,8 +323,34 @@ var TafFormButtons = function TafFormButtons(_ref2) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var prependZeroes = function prependZeroes(value, totalDigits) {
+  var valueAsString = value.toString();
+  return _toConsumableArray(Array(totalDigits - valueAsString.length)).reduce(function (newVal) {
+    return "0".concat(newVal);
+  }, valueAsString);
+};
+var getFieldValue = function getFieldValue(fieldValue) {
+  return fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.trim().toUpperCase();
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var FORMAT_DAYS_HOURS = 'DDHH';
 var FORMAT_DAYS_HOURS_MINUTES = 'DDHHmm'; // formatters
@@ -457,7 +484,7 @@ var validateIsValidDates = function validateIsValidDates(value, tafStart, tafEnd
 
 
 var validateValidField = function validateValidField(value, tafStart, tafEnd) {
-  var trimmedValue = value.trim();
+  var trimmedValue = getFieldValue(value);
 
   if (!trimmedValue.length) {
     return true;
@@ -480,9 +507,9 @@ var validateValidField = function validateValidField(value, tafStart, tafEnd) {
   return true;
 };
 var validateValidChangeGroupInterField = function validateValidChangeGroupInterField(value, valueChange, valueProb, tafStart, tafEnd) {
-  var trimmedValue = value.trim();
-  var trimmedValueChange = valueChange.trim();
-  var trimmedValueProb = valueProb.trim();
+  var trimmedValue = getFieldValue(value);
+  var trimmedValueChange = getFieldValue(valueChange);
+  var trimmedValueProb = getFieldValue(valueProb);
 
   if (!trimmedValue.length) {
     return true;
@@ -532,16 +559,12 @@ var invalidPreviousChangeGroupOrderMessage = "When valid times are equal, the ch
 var invalidPreviousChangeGroupHasSameValue = "When valid times are equal, probability/change can't have the same value as previous row value";
 var validatePreviousChangeGroup = function validatePreviousChangeGroup(currentChangeGroup, previousChangeGroup, tafStart, tafEnd) {
   // extract the needed values from changeGroups
-  var valid = currentChangeGroup.valid,
-      _currentChangeGroup$c = currentChangeGroup.change,
-      change = _currentChangeGroup$c === void 0 ? '' : _currentChangeGroup$c,
-      _currentChangeGroup$p = currentChangeGroup.probability,
-      probability = _currentChangeGroup$p === void 0 ? '' : _currentChangeGroup$p;
-  var previousValid = previousChangeGroup.valid,
-      _previousChangeGroup$ = previousChangeGroup.change,
-      previousChange = _previousChangeGroup$ === void 0 ? '' : _previousChangeGroup$,
-      _previousChangeGroup$2 = previousChangeGroup.probability,
-      previousProbability = _previousChangeGroup$2 === void 0 ? '' : _previousChangeGroup$2; // get the parsed values
+  var valid = getFieldValue(currentChangeGroup.valid);
+  var change = getFieldValue(currentChangeGroup.change || '');
+  var probability = getFieldValue(currentChangeGroup.probability || '');
+  var previousValid = getFieldValue(previousChangeGroup.valid);
+  var previousChange = getFieldValue(previousChangeGroup.change || '');
+  var previousProbability = getFieldValue(previousChangeGroup.probability || ''); // get the parsed values
 
   var validValue = parseValidToObject(valid, tafStart, tafEnd);
   var previousValidValue = parseValidToObject(previousValid, tafStart, tafEnd);
@@ -578,12 +601,12 @@ var validatePreviousChangeGroup = function validatePreviousChangeGroup(currentCh
 }; // validate overlapping validity when one of the following changegroups is FM
 
 var validateOverlapWithFM = function validateOverlapWithFM(currentChangeGroup, nextChangeGroups, tafStart, tafEnd) {
-  var valid = currentChangeGroup.valid;
+  var valid = getFieldValue(currentChangeGroup.valid);
   if (!valid || !nextChangeGroups.length) return true;
   var validValue = parseValidToObject(valid, tafStart, tafEnd);
   var currentRowEndTime = moment(validValue.end);
   var firstFMChangeGroup = nextChangeGroups.find(function (nextChangeGroup) {
-    return nextChangeGroup.change.trim() === 'FM';
+    return getFieldValue(nextChangeGroup.change) === 'FM';
   });
 
   if (firstFMChangeGroup && firstFMChangeGroup.valid) {
@@ -598,32 +621,6 @@ var validateOverlapWithFM = function validateOverlapWithFM(currentChangeGroup, n
   return true;
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * */
-var prependZeroes = function prependZeroes(value, totalDigits) {
-  var valueAsString = value.toString();
-  return _toConsumableArray(Array(totalDigits - valueAsString.length)).reduce(function (newVal) {
-    return "0".concat(newVal);
-  }, valueAsString);
-};
-var getFieldValue = function getFieldValue(fieldValue) {
-  return fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.trim().toUpperCase();
-};
-
 var config$1 = [{
   key: 'range',
   size: 4
@@ -653,7 +650,7 @@ var formatVisibilityToString = function formatVisibilityToString(value) {
 // returns object with validity if passed numbers - returns object with cavOK: true if passed CAVOK
 
 var parseVisibilityToObject = function parseVisibilityToObject(value) {
-  var trimmedValue = value.trim();
+  var trimmedValue = getFieldValue(value);
 
   if (trimmedValue === 'CAVOK') {
     return {
@@ -701,7 +698,7 @@ var validateRange = function validateRange(value) {
 
 
 var validateVisibilityField = function validateVisibilityField(value) {
-  var trimmedValue = value.trim();
+  var trimmedValue = getFieldValue(value);
 
   if (!trimmedValue.length) {
     return true;
@@ -714,7 +711,7 @@ var validateVisibilityField = function validateVisibilityField(value) {
 
 
   if (!trimmedValue.match(/^[0-9]+$/)) {
-    return value === 'CAVOK' || invalidVisibilityMessage;
+    return trimmedValue === 'CAVOK' || invalidVisibilityMessage;
   } // validate range
 
 
@@ -1180,9 +1177,10 @@ var invalidWeatherBRVisibility = 'Invalid weather input, weather code BR needs t
 var invalidWeatherFGVisibility = 'Invalid weather input, weather code FG needs to be combined with a visibility below 1000m'; // validations
 
 var WeatherVisibilityBelow5000 = [WeatherPhenomena.FU, WeatherPhenomena.DU, WeatherPhenomena.HZ, WeatherPhenomena.DRDU, WeatherPhenomena.BLDU];
-var validateWeatherField = function validateWeatherField(value, visibilityValue) {
+var validateWeatherField = function validateWeatherField(value, visibilityFieldValue) {
   var NSWAllowed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  var trimmedValue = value.trim(); // if empty, validate as true
+  var trimmedValue = getFieldValue(value);
+  var visibilityValue = getFieldValue(visibilityFieldValue); // if empty, validate as true
 
   if (trimmedValue === '') {
     return true;
@@ -1221,14 +1219,15 @@ var validateWeatherField = function validateWeatherField(value, visibilityValue)
 
   return true;
 };
-var validateSecondWeatherField = function validateSecondWeatherField(weather1Value, weather2Value, visibilityValue) {
-  var trimmedWeather2Value = weather2Value.trim(); // Field can be left empty
+var validateSecondWeatherField = function validateSecondWeatherField(weather1Value, weather2Value, visibilityFieldValue) {
+  var trimmedWeather2Value = getFieldValue(weather2Value);
+  var visibilityValue = getFieldValue(visibilityFieldValue); // Field can be left empty
 
   if (!trimmedWeather2Value.length) {
     return true;
   }
 
-  var trimmedWeather1Value = weather1Value.trim(); // If weather1 is NSW weather2 should be empty
+  var trimmedWeather1Value = getFieldValue(weather1Value); // If weather1 is NSW weather2 should be empty
 
   if (trimmedWeather1Value === 'NSW' && trimmedWeather2Value !== '') {
     return invalidWeatherNonEmptyNSWGroups;
@@ -1246,15 +1245,16 @@ var validateSecondWeatherField = function validateSecondWeatherField(weather1Val
 
   return validateWeatherField(weather2Value, visibilityValue, false);
 };
-var validateThirdWeatherField = function validateThirdWeatherField(weather1Value, weather2Value, weather3Value, visibilityValue) {
-  var trimmedWeather3Value = weather3Value.trim(); // Field can be left empty
+var validateThirdWeatherField = function validateThirdWeatherField(weather1Value, weather2Value, weather3Value, visibilityFieldValue) {
+  var trimmedWeather3Value = getFieldValue(weather3Value);
+  var visibilityValue = getFieldValue(visibilityFieldValue); // Field can be left empty
 
   if (!trimmedWeather3Value.length) {
     return true;
   }
 
-  var trimmedWeather1Value = weather1Value.trim();
-  var trimmedWeather2Value = weather2Value.trim(); // If weather1 is NSW weather3 should be empty
+  var trimmedWeather1Value = getFieldValue(weather1Value);
+  var trimmedWeather2Value = getFieldValue(weather2Value); // If weather1 is NSW weather3 should be empty
 
   if (trimmedWeather1Value === 'NSW' && trimmedWeather3Value !== '') {
     return invalidWeatherNonEmptyNSWGroups;
@@ -1617,10 +1617,10 @@ var validateWindInterSection = function validateWindInterSection(speed, gust, di
 
 
 var validateWindField = function validateWindField(value, weatherfield1, weatherfield2, weatherfield3) {
-  var trimmedWindValue = value.trim();
-  var trimmedWeather1Value = weatherfield1.trim();
-  var trimmedWeather2Value = weatherfield2.trim();
-  var trimmedWeather3Value = weatherfield3.trim();
+  var trimmedWindValue = getFieldValue(value);
+  var trimmedWeather1Value = getFieldValue(weatherfield1);
+  var trimmedWeather2Value = getFieldValue(weatherfield2);
+  var trimmedWeather3Value = getFieldValue(weatherfield3);
 
   if (!trimmedWindValue.length) {
     return true;
@@ -1887,11 +1887,11 @@ var sharedCloudValidations = function sharedCloudValidations(_ref) {
 };
 
 var validateFirstCloud = function validateFirstCloud(value, visibilityValue, weatherfield1, weatherfield2, weatherfield3) {
-  var trimmedValueFirstCloud = value.trim();
-  var trimmedValueVisibility = visibilityValue.trim();
-  var trimmedWeather1Value = weatherfield1.trim();
-  var trimmedWeather2Value = weatherfield2.trim();
-  var trimmedWeather3Value = weatherfield3.trim(); // Field can be left empty
+  var trimmedValueFirstCloud = getFieldValue(value);
+  var trimmedValueVisibility = getFieldValue(visibilityValue);
+  var trimmedWeather1Value = getFieldValue(weatherfield1);
+  var trimmedWeather2Value = getFieldValue(weatherfield2);
+  var trimmedWeather3Value = getFieldValue(weatherfield3); // Field can be left empty
 
   if (!trimmedValueFirstCloud.length) {
     return true;
@@ -1927,9 +1927,10 @@ var validateFirstCloud = function validateFirstCloud(value, visibilityValue, wea
 
   return errorMessages.length ? errorMessages[0] : true;
 };
-var validateSecondCloud = function validateSecondCloud(firstCloudValue, secondCloudValue, visibilityValue) {
-  var trimmedValueFirstCloud = firstCloudValue.trim();
-  var trimmedValueSecondCloud = secondCloudValue.trim(); // Field can be left empty
+var validateSecondCloud = function validateSecondCloud(firstCloudValue, secondCloudValue, visibilityFieldValue) {
+  var trimmedValueFirstCloud = getFieldValue(firstCloudValue);
+  var trimmedValueSecondCloud = getFieldValue(secondCloudValue);
+  var visibilityValue = getFieldValue(visibilityFieldValue); // Field can be left empty
 
   if (!trimmedValueSecondCloud.length) {
     return true;
@@ -1996,10 +1997,11 @@ var validateSecondCloud = function validateSecondCloud(firstCloudValue, secondCl
 
   return true;
 };
-var validateThirdCloud = function validateThirdCloud(firstCloudValue, secondCloudValue, thirdCloudValue, visibilityValue) {
-  var trimmedValueFirstCloud = firstCloudValue.trim();
-  var trimmedValueSecondCloud = secondCloudValue.trim();
-  var trimmedValueThirdCloud = thirdCloudValue.trim(); // Field can be left empty
+var validateThirdCloud = function validateThirdCloud(firstCloudValue, secondCloudValue, thirdCloudValue, visibilityFieldValue) {
+  var trimmedValueFirstCloud = getFieldValue(firstCloudValue);
+  var trimmedValueSecondCloud = getFieldValue(secondCloudValue);
+  var trimmedValueThirdCloud = getFieldValue(thirdCloudValue);
+  var visibilityValue = getFieldValue(visibilityFieldValue); // Field can be left empty
 
   if (!trimmedValueThirdCloud.length) {
     return true;
@@ -2074,11 +2076,12 @@ var validateThirdCloud = function validateThirdCloud(firstCloudValue, secondClou
 
   return true;
 };
-var validateFourthCloud = function validateFourthCloud(firstCloudValue, secondCloudValue, thirdCloudValue, fourthCloudValue, visibilityValue) {
-  var trimmedValueFirstCloud = firstCloudValue.trim();
-  var trimmedValueSecondCloud = secondCloudValue.trim();
-  var trimmedValueThirdCloud = thirdCloudValue.trim();
-  var trimmedValueFourthCloud = fourthCloudValue.trim(); // Field can be left empty
+var validateFourthCloud = function validateFourthCloud(firstCloudValue, secondCloudValue, thirdCloudValue, fourthCloudValue, visibilityFieldValue) {
+  var trimmedValueFirstCloud = getFieldValue(firstCloudValue);
+  var trimmedValueSecondCloud = getFieldValue(secondCloudValue);
+  var trimmedValueThirdCloud = getFieldValue(thirdCloudValue);
+  var trimmedValueFourthCloud = getFieldValue(fourthCloudValue);
+  var visibilityValue = getFieldValue(visibilityFieldValue); // Field can be left empty
 
   if (!trimmedValueFourthCloud.length) {
     return true;
@@ -3122,6 +3125,7 @@ var IssuesPane = function IssuesPane(_ref) {
     isOpen: isOpen,
     "data-testid": "moveable-issues-pane",
     bounds: "parent",
+    cancel: "",
     onDragEnd: function onDragEnd(event) {
       if (event.x !== 0 && event.y !== 0) {
         onUserHasDragged();
@@ -3257,17 +3261,43 @@ var TafAvatar = function TafAvatar(_ref) {
   }, getInitials(editor))));
 };
 
-var textFieldStyle = function textFieldStyle(theme) {
-  return {
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var TAF_MODULE_ID = 'tafmodule';
+var ResponsiveWrapper = function ResponsiveWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      containerType: 'inline-size',
+      containerName: TAF_MODULE_ID
+    }
+  }, children);
+};
+
+var textFieldStyle = function textFieldStyle(theme, shouldPreventUppercase) {
+  return Object.assign(Object.assign({
     // input
-    marginRight: '2px',
     marginBottom: '4px',
-    width: 56,
+    width: '100%',
     height: 46,
     input: {
       textAlign: 'center',
-      fontSize: 10,
-      fontWeight: 500,
+      textTransform: shouldPreventUppercase ? 'none' : 'uppercase',
+      fontWeight: 'normal',
       paddingLeft: 0,
       paddingRight: 0,
       '&.Mui-disabled': {
@@ -3306,8 +3336,20 @@ var textFieldStyle = function textFieldStyle(theme) {
       '.Mui-disabled:before': {
         borderColor: 'transparent'
       }
+    },
+    '& .MuiFilledInput-root': {
+      borderTopLeftRadius: '0px',
+      borderTopRightRadius: '0px'
     }
-  };
+  }, !IS_JEST && _defineProperty({}, "@container ".concat(TAF_MODULE_ID, " (min-width: 1440px)"), {
+    '&.MuiFormControl-root.MuiTextField-root .inputText': {
+      fontSize: 14
+    }
+  })), {
+    '.inputText': {
+      fontSize: 12
+    }
+  });
 };
 
 var getTafErrors = function getTafErrors(name, errors) {
@@ -3330,35 +3372,43 @@ var getTafErrors = function getTafErrors(name, errors) {
 var getDisplayValue = function getDisplayValue(value, disabled) {
   return disabled && !value ? '-' : value;
 };
-var BaseTextField = /*#__PURE__*/React__default.memo(function (props) {
+var BaseTextField = /*#__PURE__*/React__default.memo(function (_a) {
+  var _a$shouldPreventUpper = _a.shouldPreventUppercase,
+      shouldPreventUppercase = _a$shouldPreventUpper === void 0 ? false : _a$shouldPreventUpper,
+      props = __rest(_a, ["shouldPreventUppercase"]);
+
+  var theme = useTheme();
+  var styling = textFieldStyle(theme, shouldPreventUppercase);
   return /*#__PURE__*/React__default.createElement(TextField, Object.assign({
     type: "text",
     variant: "filled",
-    sx: textFieldStyle
+    sx: styling
   }, props));
 }, function (prevProps, nextProps) {
   return prevProps.value === nextProps.value && prevProps.error === nextProps.error && prevProps.name === nextProps.name && prevProps.disabled === nextProps.disabled;
 });
 
-var TafFormTextField = function TafFormTextField(_ref) {
-  var label = _ref.label,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? '' : _ref$name,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$onBlur = _ref.onBlur,
-      onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
-      _ref$defaultValue = _ref.defaultValue,
-      defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
-      _ref$formatter = _ref.formatter,
-      formatter = _ref$formatter === void 0 ? null : _ref$formatter,
-      rules = _ref.rules,
-      _ref$autoComplete = _ref.autoComplete,
-      autoComplete = _ref$autoComplete === void 0 ? [] : _ref$autoComplete,
-      _ref$autoFocus = _ref.autoFocus,
-      autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
+var TafFormTextField = function TafFormTextField(_ref2) {
+  var label = _ref2.label,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$name = _ref2.name,
+      name = _ref2$name === void 0 ? '' : _ref2$name,
+      _ref2$onChange = _ref2.onChange,
+      onChange = _ref2$onChange === void 0 ? function () {} : _ref2$onChange,
+      _ref2$onBlur = _ref2.onBlur,
+      onBlur = _ref2$onBlur === void 0 ? function () {} : _ref2$onBlur,
+      _ref2$defaultValue = _ref2.defaultValue,
+      defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
+      _ref2$formatter = _ref2.formatter,
+      formatter = _ref2$formatter === void 0 ? null : _ref2$formatter,
+      rules = _ref2.rules,
+      _ref2$autoComplete = _ref2.autoComplete,
+      autoComplete = _ref2$autoComplete === void 0 ? [] : _ref2$autoComplete,
+      _ref2$autoFocus = _ref2.autoFocus,
+      autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
+      _ref2$shouldPreventUp = _ref2.shouldPreventUppercase,
+      shouldPreventUppercase = _ref2$shouldPreventUp === void 0 ? false : _ref2$shouldPreventUp;
 
   var _useFormContext = useFormContext(),
       control = _useFormContext.control,
@@ -3387,7 +3437,8 @@ var TafFormTextField = function TafFormTextField(_ref) {
 
       if (foundValue) {
         setValue(name, foundValue.value, {
-          shouldDirty: true
+          shouldDirty: true,
+          shouldValidate: true
         });
         setMaxLength(foundValue.value.length);
         event.preventDefault();
@@ -3395,9 +3446,10 @@ var TafFormTextField = function TafFormTextField(_ref) {
     }
   }, [name, autoComplete, setValue]);
   var onChangeField = React__default.useCallback(function (event, callback) {
-    var valueUppercase = event.currentTarget.value.toUpperCase();
+    var value = event.currentTarget.value;
 
     if (autoComplete) {
+      var valueUppercase = value.toUpperCase();
       var exist = autoComplete.find(function (e) {
         return e.value === valueUppercase;
       });
@@ -3405,17 +3457,32 @@ var TafFormTextField = function TafFormTextField(_ref) {
       setMaxLength(newMaxLength);
     }
 
-    callback(valueUppercase);
-    onChange(valueUppercase);
+    callback(value);
+    onChange(value);
   }, [onChange, autoComplete]);
-  var onBlurField = React__default.useCallback(function (callback) {
+  var onBlurField = React__default.useCallback(function (event, callback) {
+    var value = event.target.value;
+    var valueUppercase = value.toUpperCase();
+
+    if (value !== valueUppercase && !shouldPreventUppercase) {
+      setValue(name, valueUppercase, {
+        shouldValidate: true
+      });
+    }
+
     callback();
     onBlur();
-  }, [onBlur]);
+  }, [onBlur, name, setValue, shouldPreventUppercase]);
   var hasError = !!fieldErrors;
-  return /*#__PURE__*/React__default.createElement(Controller, {
-    render: function render(_ref2) {
-      var field = _ref2.field;
+  return /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    sx: {
+      width: "".concat(100 / 13, "%"),
+      minWidth: 60
+    }
+  }, /*#__PURE__*/React__default.createElement(Controller, {
+    render: function render(_ref3) {
+      var field = _ref3.field;
       var displayValue = formatter ? formatter(field.value) : getDisplayValue(field.value, disabled);
       return /*#__PURE__*/React__default.createElement(BaseTextField, {
         label: label,
@@ -3423,25 +3490,27 @@ var TafFormTextField = function TafFormTextField(_ref) {
         name: name,
         value: displayValue,
         inputRef: field.ref,
-        onChange: function onChange(e) {
-          return onChangeField(e, field.onChange);
+        onChange: function onChange(event) {
+          return onChangeField(event, field.onChange);
         },
         onKeyDown: onKeyDown,
         error: hasError,
-        onBlur: function onBlur() {
-          return onBlurField(field.onBlur);
+        onBlur: function onBlur(event) {
+          return onBlurField(event, field.onBlur);
         },
         inputProps: {
-          maxLength: maxLength
+          maxLength: maxLength,
+          className: 'inputText'
         },
-        autoFocus: autoFocus
+        autoFocus: autoFocus,
+        shouldPreventUppercase: shouldPreventUppercase
       });
     },
     name: name,
     control: control,
     defaultValue: defaultValue,
     rules: rules
-  });
+  }));
 };
 
 /* *
@@ -3718,6 +3787,14 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       marginTop: '8px',
       backgroundColor: 'geowebColors.cards.cardContainer',
       position: 'relative',
+      paddingLeft: {
+        xs: '2px',
+        lg: '10px'
+      },
+      paddingRight: {
+        xs: '2px',
+        lg: '10px'
+      },
       '&.sortable-chosen': {
         boxShadow: 1
       },
@@ -3732,12 +3809,10 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   }, props, {
     className: "formRow"
   }), /*#__PURE__*/React__default.createElement(Grid, {
-    columns: 24,
     item: true,
     container: true,
     justifyContent: "flex-end",
-    xs: 24,
-    sm: 23
+    xs: true
   }, !isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Type",
     name: fieldNames.messageType,
@@ -3750,12 +3825,15 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     formatter: formatIssueTime,
     label: "Issue time",
     name: "issueDate",
-    disabled: true
+    disabled: true,
+    shouldPreventUppercase: true
   })), isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
     sx: {
-      width: 56,
-      marginRight: '2px'
-    }
+      marginRight: '2px',
+      minWidth: 60
+    },
+    display: "flex",
+    justifyContent: "center"
   }, !disabled && dragHandle), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Prob",
     name: fieldNames.probability,
@@ -3999,12 +4077,11 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     container: true,
     justifyContent: "flex-end",
     alignItems: "flex-end",
-    xs: 24,
-    sm: 1,
     sx: {
-      marginBottom: '16px'
-    },
-    columns: 24
+      width: '3.5%',
+      marginBottom: '14px',
+      minWidth: 28
+    }
   }, /*#__PURE__*/React__default.createElement(TafFormOptionsButton, {
     isChangeGroup: isChangeGroup,
     addChangeGroupBelow: addChangeGroupBelow,
@@ -5246,7 +5323,12 @@ var TacOverview = function TacOverview(_ref) {
   }))), /*#__PURE__*/React__default.createElement(Box, {
     ref: scrollRef,
     sx: {
-      padding: '10px',
+      padding: {
+        xs: '12px',
+        sm: '6px',
+        md: '16px',
+        lg: '24px'
+      },
       maxHeight: '100%',
       overflow: 'auto'
     }
@@ -6164,7 +6246,6 @@ var TafLayout = function TafLayout(_ref2) {
   }, /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       minWidth: 320,
-      maxWidth: 1272,
       margin: 'auto',
       height: '100%',
       display: 'flex',
@@ -6373,7 +6454,7 @@ var TafModule = function TafModule() {
   }, []);
   usePoller([tafList, getTafListError], fetchNewTafList);
   var hasTafListError = getTafListError !== null;
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(ResponsiveWrapper, null, /*#__PURE__*/React.createElement(Box, {
     component: "div",
     id: "tafmodule",
     sx: {
@@ -6398,7 +6479,7 @@ var TafModule = function TafModule() {
     tafList: tafList,
     onUpdateTaf: onUpdateTaf,
     lastUpdateTime: lastUpdateTime
-  }));
+  })));
 };
 
 var Wrapper = function Wrapper(props) {