Merge pull request #160 from openedx/kenclary/TNL-10236

fix: editor title editing no longer tries to scale with input size. TNL-10236.

src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx

@@ -11,27 +11,23 @@ export const EditableHeader = ({
   inputRef,
   localTitle,
   cancelEdit,
-}) => {
-  const width = localTitle.length * 8 + 200;
-  return (
-    <Form.Group
-      style={{ 'min-width': '200px', width: `${width}px` }}
-      className="mw-100"
-      onBlur={(e) => updateTitle(e)}
-    >
-      <Form.Control
-        style={{ 'padding-inline-end': 'calc(1rem + 84px)' }}
-        autoFocus
-        trailingElement={<EditConfirmationButtons {...{ updateTitle, cancelEdit }} />}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        placeholder="Title"
-        ref={inputRef}
-        value={localTitle}
-      />
-    </Form.Group>
-  );
-};
+}) => (
+  <Form.Group
+    style={{ width: '90%' }}
+    onBlur={(e) => updateTitle(e)}
+  >
+    <Form.Control
+      style={{ paddingInlineEnd: 'calc(1rem + 84px)' }}
+      autoFocus
+      trailingElement={<EditConfirmationButtons {...{ updateTitle, cancelEdit }} />}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      placeholder="Title"
+      ref={inputRef}
+      value={localTitle}
+    />
+  </Form.Group>
+);
 EditableHeader.defaultProps = {
   inputRef: null,
 };

src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditableHeader.test.jsx.snap

@@ -2,12 +2,10 @@
 
 exports[`EditableHeader snapshot snapshot 1`] = `
 <Form.Group
-  className="mw-100"
   onBlur={[Function]}
   style={
     Object {
-      "min-width": "200px",
-      "width": "320px",
+      "width": "90%",
     }
   }
 >
@@ -18,7 +16,7 @@ exports[`EditableHeader snapshot snapshot 1`] = `
     placeholder="Title"
     style={
       Object {
-        "padding-inline-end": "calc(1rem + 84px)",
+        "paddingInlineEnd": "calc(1rem + 84px)",
       }
     }
     trailingElement={