From a1878b9f5b1702142b71853349271c69847db0a9 Mon Sep 17 00:00:00 2001
From: Max Goodhart <c@chromakode.com>
Date: Fri, 28 Aug 2020 22:16:54 -0700
Subject: [PATCH] Improve display for lower screen heights

---
 src/web/control.js | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/web/control.js b/src/web/control.js
index 442f793..b53c79b 100644
--- a/src/web/control.js
+++ b/src/web/control.js
@@ -501,11 +501,13 @@ function App({ wsEndpoint, role }) {
   return (
     <Stack flex="1">
       <Stack>
-        <h1>Streamwall ({location.host})</h1>
-        <div>
-          connection status: {isConnected ? 'connected' : 'connecting...'}
-        </div>
-        <div>role: {role}</div>
+        <StyledHeader>
+          <h1>Streamwall ({location.host})</h1>
+          <div>
+            connection status: {isConnected ? 'connected' : 'connecting...'}
+          </div>
+          <div>role: {role}</div>
+        </StyledHeader>
         {delayState && (
           <StreamDelayBox
             delayState={delayState}
@@ -571,7 +573,7 @@ function App({ wsEndpoint, role }) {
           )}
         </StyledDataContainer>
       </Stack>
-      <Stack flex="1" scroll={true}>
+      <Stack flex="1" scroll={true} minHeight={200}>
         <StyledDataContainer isConnected={isConnected}>
           <div>
             {isConnected
@@ -656,6 +658,7 @@ const Stack = styled.div`
   flex-direction: column;
   flex: ${({ flex }) => flex};
   ${({ scroll }) => scroll && `overflow-y: auto`};
+  ${({ minHeight }) => minHeight && `min-height: ${minHeight}px`};
 `
 
 function StreamDelayBox({ delayState, setStreamCensored }) {
@@ -937,6 +940,21 @@ function CustomStreamInput({ idx, onChange, ...props }) {
   )
 }
 
+const StyledHeader = styled.header`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  h1 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  * {
+    margin-right: 2rem;
+  }
+`
+
 const StyledStreamDelayBox = styled.div`
   display: inline-flex;
   margin: 5px 0;