fix: Fix flex styling for rename layer

performant-software · Jul 30, 2021 · 101f731 · 101f731
1 parent ad669f4
commit 101f731
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/client/src/CanvasResource.js b/client/src/CanvasResource.js
@@ -1138,37 +1138,38 @@ class CanvasResource extends Component {
                     <span className="current-tile-name">
                       {`: ${!editingLayerName ? currentLayerName : ''}`}
                     </span>
-                    {editingLayerName && (
-                      <TextField
-                        name={`layer${this.state.currentPage}-name`}
-                        disabled={loading}
-                        value={this.state.layerName}
-                        inputStyle={{
-                          color: 'white',
-                          fontSize: '0.8rem',
-                          paddingLeft: '5px',
-                        }}
-                        style={{
-                          flexGrow: '1',
-                          overflow: 'hidden',
-                          borderBottom: '1px solid white',
-                          height: '24px',
-                          width: 'auto',
-                          maxWidth: '100%',
-                        }}
-                        underlineShow={false}
-                        autoComplete='off'
-                        onChange={this.onChangeLayerName.bind(this)}
-                      />
-                    )}
                   </div>
+                  {editingLayerName && (
+                    <TextField
+                      name={`layer${this.state.currentPage}-name`}
+                      disabled={loading}
+                      value={this.state.layerName}
+                      inputStyle={{
+                        color: 'white',
+                        fontSize: '0.8rem',
+                        paddingLeft: '5px',
+                        flex: '1 1 auto',
+                      }}
+                      style={{
+                        overflow: 'hidden',
+                        borderBottom: '1px solid white',
+                        height: '24px',
+                        width: 'auto',
+                        flex: '1 1 auto',
+                        maxWidth: '100%',
+                      }}
+                      underlineShow={false}
+                      autoComplete='off'
+                      onChange={this.onChangeLayerName.bind(this)}
+                    />
+                  )}
                   {!editingLayerName && (
                     <IconButton
                       disabled={loading}
                       tooltip="Edit layer name"
                       type="button"
                       onClick={this.editLayerNameClick.bind(this)}
-                      style={{ ...floatingIconBackdropStyle, width: 'auto', height: 'auto' }}
+                      style={{ width: '16px', height: 'auto', paddingLeft: '3px' }}
                       iconStyle={smallIconStyle}
                       tooltipStyles={tooltipStyle}
                     >

diff --git a/client/src/index.css b/client/src/index.css
@@ -36,7 +36,7 @@ body {
   display: flex;
   align-items: center;
   height: 18px;
-  flex-grow: 1;
+  padding-right: 3px;
 }
 
 .current-tile-page {
@@ -51,9 +51,12 @@ body {
 .tile-name-form {
   display: flex;
   text-overflow: ellipsis;
-  padding: 1px 0px;
   width: 100%;
+  flex: 0 1 auto;
+  align-items: center;
+  height: 18px;
 }
+
 .ProseMirror-menubar {
   min-height: 48px !important;
 }