Use flexbox to layout the title-bar when in edit mode. Fixes #387

Signed-off-by: Eric Wittmann <eric.wittmann@gmail.com>
Apicurio · Aug 13, 2018 · bc03775 · bc03775
1 parent 791ae0e
commit bc03775
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/front-end/studio/src/app/pages/apis/{apiId}/editor/editor.component.css b/front-end/studio/src/app/pages/apis/{apiId}/editor/editor.component.css
@@ -377,21 +377,23 @@
 .api-editor .editor-title-bar .title-editor-form {
   height: 42px;
   flex-grow: 1;
+  display: flex;
+  flex-direction: row;
 }
 .api-editor .editor-title-bar .title-editor-form .title-editor-input {
-  width: 75%;
   font-size: 22px;
-  float: left;
   font-weight: 300;
   height: 37px;
   margin: 2px;
   margin-left: 47px;
+  flex-grow: 1;
 }
 .api-editor .editor-title-bar .title-editor-form .edit-buttons {
-  float: right;
   height: 42px;
   line-height: 40px;
+  margin-left: 40px;
   margin-right: 20px;
+  white-space: nowrap;
 }
 .api-editor .editor-title-bar .title-editor-form .edit-buttons button {
   width: 75px;