From 21841fe09fb68361385c2bf50023bea532f63f73 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Wed, 26 Apr 2023 09:13:04 -0400
Subject: [PATCH] fix: editable header width (#318)

---
 .../EditorContainer/__snapshots__/index.test.jsx.snap        | 4 ++--
 .../components/TitleHeader/EditableHeader.jsx                | 5 +----
 .../TitleHeader/__snapshots__/EditableHeader.test.jsx.snap   | 5 -----
 .../components/TitleHeader/__snapshots__/index.test.jsx.snap | 2 +-
 .../EditorContainer/components/TitleHeader/index.jsx         | 2 +-
 src/editors/containers/EditorContainer/index.jsx             | 5 +----
 6 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap b/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
index 6faecead0..59752ed01 100644
--- a/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
@@ -45,7 +45,7 @@ exports[`EditorContainer component render snapshot: initialized. enable save and
       className="d-flex flex-row justify-content-between"
     >
       <h2
-        className="h3 d-flex flex-row align-items-center"
+        className="h3 col pl-0"
       >
         <injectIntl(ShimmedIntlComponent)
           isInitialized={true}
@@ -126,7 +126,7 @@ exports[`EditorContainer component render snapshot: not initialized. disable sav
       className="d-flex flex-row justify-content-between"
     >
       <h2
-        className="h3 d-flex flex-row align-items-center"
+        className="h3 col pl-0"
       >
         <injectIntl(ShimmedIntlComponent)
           isInitialized={false}
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx b/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx
index 10388083b..ecf04cdff 100644
--- a/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx
@@ -12,10 +12,7 @@ export const EditableHeader = ({
   localTitle,
   cancelEdit,
 }) => (
-  <Form.Group
-    style={{ width: '90%' }}
-    onBlur={(e) => updateTitle(e)}
-  >
+  <Form.Group onBlur={(e) => updateTitle(e)}>
     <Form.Control
       style={{ paddingInlineEnd: 'calc(1rem + 84px)' }}
       autoFocus
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 9f01bed33..411ed683e 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
@@ -3,11 +3,6 @@
 exports[`EditableHeader snapshot snapshot 1`] = `
 <Form.Group
   onBlur={[Function]}
-  style={
-    Object {
-      "width": "90%",
-    }
-  }
 >
   <Form.Control
     autoFocus={true}
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/index.test.jsx.snap b/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/index.test.jsx.snap
index f3decccae..279d85a82 100644
--- a/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/index.test.jsx.snap
@@ -12,7 +12,7 @@ exports[`TitleHeader snapshots editing 1`] = `
 
 exports[`TitleHeader snapshots initialized 1`] = `
 <div
-  className="d-flex flex-row align-items-center"
+  className="d-flex flex-row align-items-center mt-1"
 >
   <Truncate>
     <Component />
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/index.jsx b/src/editors/containers/EditorContainer/components/TitleHeader/index.jsx
index 482b4ae55..5c7ce547d 100644
--- a/src/editors/containers/EditorContainer/components/TitleHeader/index.jsx
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/index.jsx
@@ -46,7 +46,7 @@ export const TitleHeader = ({
     );
   }
   return (
-    <div className="d-flex flex-row align-items-center">
+    <div className="d-flex flex-row align-items-center mt-1">
       <Truncate>
         {title}
       </Truncate>
diff --git a/src/editors/containers/EditorContainer/index.jsx b/src/editors/containers/EditorContainer/index.jsx
index 69986d327..f085e7ad6 100644
--- a/src/editors/containers/EditorContainer/index.jsx
+++ b/src/editors/containers/EditorContainer/index.jsx
@@ -48,12 +48,9 @@ export const EditorContainer = ({
       </BaseModal>
       <ModalDialog.Header className="shadow-sm zindex-10">
         <div className="d-flex flex-row justify-content-between">
-          <h2
-            className="h3 d-flex flex-row align-items-center"
-          >
+          <h2 className="h3 col pl-0">
             <TitleHeader isInitialized={isInitialized} />
           </h2>
-
           <IconButton
             src={Close}
             iconAs={Icon}