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,23 +145,19 @@ 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,
-            padding: 0,
-            marginTop: '-4px',
-            boxSizing: 'border-box',
-            display: 'block'
-          }}>
               <a href={'#'}
                  onClick={() => this.props.displayPinnedManager(false)}
-             style={{cursor: 'pointer'}}>X</a>
+                 style={{cursor: 'pointer', flex: '0'}}>X</a>
             </div>
             <h1 style={{width: '100%', textAlign: 'center'}}>{'Pinned File Manager'}</h1>
-        <div className={'PinnedManagerActiveDirectory'}><b>&nbsp;{this.state.active_directory}</b>
+            <div className={'PinnedManagerActiveDirectory'}>
+              <b>&nbsp;{this.state.active_directory}</b>
             </div>
-        <div className={'PinnedManagerOwner'}>
+          </div>
+          <div className={'PinnedManagerItemsOwner'}>
             <div className={'PinnedManagerItems'}>
               {
                 this.state.items.map((i, k) => {
@@ -172,6 +168,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends IPCCon
               }
             </div>
           </div>
+        </div>
       </Box>
     )
   }