From f6574c6849988d502d57a4962d2e23b7301616b7 Mon Sep 17 00:00:00 2001
From: Ken Clary <kclary@edx.org>
Date: Tue, 6 Dec 2022 20:38:40 -0500
Subject: [PATCH] fix: editor title editing no longer tries to scale with input
 size. TNL-10236.

---
 .../components/TitleHeader/EditableHeader.jsx | 38 +++++++++----------
 .../EditableHeader.test.jsx.snap              |  6 +--
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx b/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx
index 816ecf8cf..10388083b 100644
--- a/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx
+++ b/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,
 };
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditableHeader.test.jsx.snap b/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditableHeader.test.jsx.snap
index 557b7bb03..9f01bed33 100644
--- a/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditableHeader.test.jsx.snap
+++ b/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={