Fix layout on small screens

Author: haad

README.md

@@ -2,7 +2,7 @@
 
 > UI for managing [OrbitDB](https://github.com/orbitdb/orbit-db) databases.
 
-**Run the [Control Center](https://gateway.pinata.cloud/ipfs/QmQjGSJ3MJho7CTySsyno5qi6J8GQCaVGPLq6Dn73gDBDH) in your browser.**
+**Run the [Control Center](https://ipfs.io/ipfs/QmbUP5MPCYnFcouSmB5oRj91jNSHYGGbyqvbPUvNoxFomo) in your browser.**
 
 <img width="80%" src="https://raw.githubusercontent.com/haadcode/orbit-db-control-center/master/screenshot1.png"/>
 

src/components/Header.js

@@ -31,7 +31,7 @@ function Header () {
         <Pane
           display='flex'
           flex='1 1 60%'
-          paddingX={majorScale(6)}
+          paddingLeft={majorScale(6)}
           paddingY={majorScale(1)}
           borderBottom='default'
         >
@@ -51,9 +51,14 @@ function Header () {
           flex='1 1 40%'
           alignItems='center'
           justifyContent='center'
-          paddingX={majorScale(6)}
+          paddingRight={majorScale(6)}
         >
-          <SearchInput placeholder='Search...' width='100%' onKeyUp={handleKeyUp} />
+          <SearchInput 
+            placeholder='Search...' 
+            height={24}
+            width='100%' 
+            onKeyUp={handleKeyUp} 
+          />
         </Pane>
       </Pane>
     </Pane>

src/views/Databases.js

@@ -105,17 +105,18 @@ function DatabasesView () {
         Open
       </Button>
     </Pane>
-    <Pane display='flex' justifyContent='center'>
+    <Pane display='flex' justifyContent='center' overflow='auto'>
       <CreateDialog onCreate={createDB}/>
       <AddDialog onAdd={addDB}/>
       <Pane
         flex='1'
+        overflow='auto'
         elevation={1}
         background='white'
         marginX={majorScale(6)}
       >
         {!appState.loading.programs 
-          ? (<ProgramList 
+          ? (<ProgramList
               programs={appState.programs}
               onRemove={handleRemoveDatabase}
             />)