fix: addressed chrome browser issues (#2453)

src/core/client/admin/routes/Configure/sections/General/CommentEditingConfig.css

@@ -1,3 +0,0 @@
-.commentEditingTextInput {
-  width: 120px;
-}

src/core/client/admin/routes/Configure/sections/General/CommentLengthConfig.tsx

@@ -79,7 +79,9 @@ const CommentLengthConfig: FunctionComponent<Props> = ({ disabled }) => (
             >
               <TextField
                 id="configure-general-commentLength-min"
-                className={styles.commentLengthTextInput}
+                classes={{
+                  input: styles.commentLengthTextInput,
+                }}
                 {...input}
                 disabled={disabled}
                 autoComplete="off"
@@ -123,7 +125,9 @@ const CommentLengthConfig: FunctionComponent<Props> = ({ disabled }) => (
             >
               <TextField
                 id="configure-general-commentLength-max"
-                className={styles.commentLengthTextInput}
+                classes={{
+                  input: styles.commentLengthTextInput,
+                }}
                 disabled={disabled}
                 autoComplete="off"
                 autoCorrect="off"

src/core/client/admin/routes/Configure/sections/Moderation/PerspectiveConfig.tsx

@@ -97,7 +97,9 @@ const PerspectiveConfig: FunctionComponent<Props> = ({ disabled }) => {
             <>
               <TextField
                 id="configure-moderation-perspective-threshold"
-                className={styles.thresholdTextField}
+                classes={{
+                  input: styles.thresholdTextField,
+                }}
                 disabled={disabled}
                 autoComplete="off"
                 autoCorrect="off"

src/core/client/admin/routes/Configure/sections/Moderation/RecentCommentHistoryConfig.tsx

@@ -111,7 +111,9 @@ const RecentCommentHistoryConfig: FunctionComponent<Props> = ({ disabled }) => {
           {({ input, meta }) => (
             <>
               <TextField
-                className={styles.thresholdTextField}
+                classes={{
+                  input: styles.thresholdTextField,
+                }}
                 disabled={disabled}
                 autoComplete="off"
                 autoCorrect="off"

src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap

@@ -408,13 +408,13 @@ Markdown can be found
                 Minimum Comment Length
               </label>
               <div
-                className="TextField-root CommentLengthConfig-commentLengthTextInput"
+                className="TextField-root"
               >
                 <input
                   autoCapitalize="off"
                   autoComplete="off"
                   autoCorrect="off"
-                  className="TextField-input TextField-colorRegular TextField-textAlignCenter"
+                  className="TextField-input CommentLengthConfig-commentLengthTextInput TextField-colorRegular TextField-textAlignCenter"
                   disabled={false}
                   id="configure-general-commentLength-min"
                   name="charCount.min"
@@ -447,13 +447,13 @@ Markdown can be found
                 Maximum Comment Length
               </label>
               <div
-                className="TextField-root CommentLengthConfig-commentLengthTextInput"
+                className="TextField-root"
               >
                 <input
                   autoCapitalize="off"
                   autoComplete="off"
                   autoCorrect="off"
-                  className="TextField-input TextField-colorRegular TextField-textAlignCenter"
+                  className="TextField-input CommentLengthConfig-commentLengthTextInput TextField-colorRegular TextField-textAlignCenter"
                   disabled={false}
                   id="configure-general-commentLength-max"
                   name="charCount.max"
@@ -526,7 +526,7 @@ moderation panel.
                 >
                   <select
                     aria-label="unit"
-                    className="SelectField-select DurationField-unit"
+                    className="SelectField-select DurationField-select"
                     disabled={false}
                     name="editCommentWindowLength-unit"
                     onBlur={[Function]}
@@ -671,7 +671,7 @@ moderation panel.
                 >
                   <select
                     aria-label="unit"
-                    className="SelectField-select DurationField-unit"
+                    className="SelectField-select DurationField-select"
                     disabled={false}
                     name="closeCommenting.timeout-unit"
                     onBlur={[Function]}

src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap

@@ -158,16 +158,12 @@ and submitted comments are counted.
                     type="text"
                     value="7"
                   />
-                  <div
-                    className="TextField-adornment"
-                  >
-                    <p
-                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                    >
-                      Days
-                    </p>
-                  </div>
                 </div>
+                <p
+                  className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary DurationField-unit"
+                >
+                  Days
+                </p>
               </div>
             </fieldset>
             <fieldset
@@ -259,13 +255,13 @@ comment history timeframe (does not include comments pending for
 toxicity, spam or pre-moderation.)
               </p>
               <div
-                className="TextField-root RecentCommentHistoryConfig-thresholdTextField"
+                className="TextField-root"
               >
                 <input
                   autoCapitalize="off"
                   autoComplete="off"
                   autoCorrect="off"
-                  className="TextField-input TextField-colorRegular TextField-textAlignCenter"
+                  className="TextField-input RecentCommentHistoryConfig-thresholdTextField TextField-colorRegular TextField-textAlignCenter"
                   disabled={false}
                   name="recentCommentHistory.triggerRejectionRate"
                   onBlur={[Function]}
@@ -519,13 +515,13 @@ the
 comment is toxic, according to Perspective API. By default the threshold is set to 80%.
               </p>
               <div
-                className="TextField-root PerspectiveConfig-thresholdTextField"
+                className="TextField-root"
               >
                 <input
                   autoCapitalize="off"
                   autoComplete="off"
                   autoCorrect="off"
-                  className="TextField-input TextField-colorRegular TextField-textAlignCenter"
+                  className="TextField-input PerspectiveConfig-thresholdTextField TextField-colorRegular TextField-textAlignCenter"
                   disabled={false}
                   id="configure-moderation-perspective-threshold"
                   name="integrations.perspective.threshold"

src/core/client/framework/components/DurationField.css

@@ -2,7 +2,11 @@
   width: calc(6 * var(--mini-unit));
 }
 
-.unit {
+.select {
   height: 100%;
   min-width: calc(17 * var(--mini-unit));
 }
+
+.unit {
+  line-height: 36px;
+}

src/core/client/framework/components/DurationField.tsx

@@ -142,20 +142,6 @@ class DurationField extends Component<Props, State> {
       return null;
     }
 
-    let adornment: React.ReactNode = null;
-    if (this.state.elementCallbacks.length === 1) {
-      const unit = this.state.elementCallbacks[0];
-      adornment = (
-        <Localized
-          id="framework-durationField-unit"
-          $unit={unit}
-          $value={parseInt(this.state.value, 10)}
-        >
-          <Typography variant="bodyCopy">{unit}</Typography>
-        </Localized>
-      );
-    }
-
     return (
       <Flex itemGutter>
         <TextField
@@ -168,18 +154,27 @@ class DurationField extends Component<Props, State> {
           autoCorrect="off"
           autoCapitalize="off"
           spellCheck={false}
-          adornment={adornment}
           textAlignCenter
           aria-label="value"
         />
-        {!adornment && (
+        {this.state.elementCallbacks.length === 1 ? (
+          <Localized
+            id="framework-durationField-unit"
+            $unit={this.state.elementCallbacks[0]}
+            $value={parseInt(this.state.value, 10)}
+          >
+            <Typography variant="bodyCopy" className={styles.unit}>
+              {this.state.elementCallbacks[0]}
+            </Typography>
+          </Localized>
+        ) : (
           <SelectField
             name={`${name}-unit`}
             onChange={this.handleUnitChange}
             disabled={disabled}
             aria-label="unit"
             classes={{
-              select: styles.unit,
+              select: styles.select,
             }}
             value={(this.state.unit || this.state.units[0]).toString()}
           >

src/core/client/framework/components/__snapshots__/DurationField.spec.tsx.snap

@@ -5,7 +5,6 @@ exports[`accepts invalid input 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -22,7 +21,7 @@ exports[`accepts invalid input 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}
@@ -72,7 +71,6 @@ exports[`renders correctly with default units 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -89,7 +87,7 @@ exports[`renders correctly with default units 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}
@@ -139,7 +137,6 @@ exports[`renders correctly with specified units 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -156,7 +153,7 @@ exports[`renders correctly with specified units 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}
@@ -195,7 +192,6 @@ exports[`use best matching unit 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -212,7 +208,7 @@ exports[`use best matching unit 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}
@@ -262,7 +258,6 @@ exports[`use initial unit if 0 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -279,7 +274,7 @@ exports[`use initial unit if 0 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}