Layout changes

src/containers/PinnedManager/PinnedManager.css

@@ -1,22 +1,44 @@
+.PinnedManager {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .PinnedManagerActiveDirectory {
   margin-top: var(--default_spacing);
   margin-bottom: var(--default_spacing);
   padding: 2px;
   width: calc(100% - 4px);
+  overflow: auto;
   text-align: left;
   border-radius: var(--border_radius);
   background: var(--control_background);
 }
 
-.PinnedManagerOwner {
+.PinnedManagerClose {
-  height: 70%;
+  float: right;
-  padding: var(--default_spacing);
+  flex: 0;
-  border-radius: var(--border_radius);
+  padding: 0;
-  background: var(--control_background);
+  margin-top: -4px;
+  box-sizing: border-box;
+  display: block;
+}
+
+.PinnedManagerHeading {
+  flex: 0;
 }
 
 .PinnedManagerItems {
   height: 100%;
-  overflow-x: auto;
+  overflow: auto;
-  overflow-y: auto;
+}
+
+.PinnedManagerItemsOwner {
+  margin: 0;
+  padding: var(--default_spacing);
+  border-radius: var(--border_radius);
+  background: var(--control_background);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }

src/containers/PinnedManager/PinnedManager.js

@@ -145,31 +145,28 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends IPCCon
         padding: 'var(--default_spacing)',
         width: 'calc(100vw - (var(--default_spacing) * 4)'
       }}>
-        <div
+        <div className={'PinnedManager'}>
-          style={{
+          <div className={'PinnedManagerHeading'}>
-            float: 'right',
+            <div className={'PinnedManagerClose'}>
-            margin: 0,
+              <a href={'#'}
-            padding: 0,
+                 onClick={() => this.props.displayPinnedManager(false)}
-            marginTop: '-4px',
+                 style={{cursor: 'pointer', flex: '0'}}>X</a>
-            boxSizing: 'border-box',
+            </div>
-            display: 'block'
+            <h1 style={{width: '100%', textAlign: 'center'}}>{'Pinned File Manager'}</h1>
-          }}>
+            <div className={'PinnedManagerActiveDirectory'}>
-          <a href={'#'}
+              <b>&nbsp;{this.state.active_directory}</b>
-             onClick={() => this.props.displayPinnedManager(false)}
+            </div>
-             style={{cursor: 'pointer'}}>X</a>
+          </div>
-        </div>
+          <div className={'PinnedManagerItemsOwner'}>
-        <h1 style={{width: '100%', textAlign: 'center'}}>{'Pinned File Manager'}</h1>
+            <div className={'PinnedManagerItems'}>
-        <div className={'PinnedManagerActiveDirectory'}><b>&nbsp;{this.state.active_directory}</b>
+              {
-        </div>
+                this.state.items.map((i, k) => {
-        <div className={'PinnedManagerOwner'}>
+                  return i.directory ?
-          <div className={'PinnedManagerItems'}>
+                    this.createDirectory(i.name, i.path, idx++, this.state.items.length, k) :
-            {
+                    this.createFile(i.name, i.path, i.meta.pinned, idx++, this.state.items.length, k);
-              this.state.items.map((i, k) => {
+                })
-                return i.directory ?
+              }
-                  this.createDirectory(i.name, i.path, idx++, this.state.items.length, k) :
+            </div>
-                  this.createFile(i.name, i.path, i.meta.pinned, idx++, this.state.items.length, k);
-              })
-            }
           </div>
         </div>
       </Box>