Make stream list scrollable

src/web/control.js

@@ -7,7 +7,7 @@ import { patch as patchJSON } from 'jsondiffpatch'
 import { h, Fragment, render } from 'preact'
 import { useEffect, useState, useCallback, useRef } from 'preact/hooks'
 import { State } from 'xstate'
-import styled, { css } from 'styled-components'
+import styled, { createGlobalStyle } from 'styled-components'
 import { useHotkeys } from 'react-hotkeys-hook'
 
 import '../index.css'
@@ -42,6 +42,17 @@ const hotkeyTriggers = [
   'p',
 ]
 
+const GlobalStyle = createGlobalStyle`
+  html {
+    height: 100%;
+  }
+
+  html, body {
+    display: flex;
+    flex: 1;
+  }
+`
+
 function useYDoc(keys) {
   const [doc, setDoc] = useState(new Y.Doc())
   const [docValue, setDocValue] = useState()
@@ -376,7 +387,8 @@ function App({ wsEndpoint }) {
   )
 
   return (
-    <div>
+    <Stack flex="1">
+      <Stack>
         <h1>Streamwall ({location.host})</h1>
         <div>
           connection status: {isConnected ? 'connected' : 'connecting...'}
@@ -433,10 +445,18 @@ function App({ wsEndpoint }) {
             />
             Show stream debug tools
           </label>
+        </StyledDataContainer>
+      </Stack>
+      <Stack flex="1" scroll={true}>
+        <StyledDataContainer isConnected={isConnected}>
           <div>
             {isConnected
               ? normalStreams.map((row) => (
-                <StreamLine id={row._id} row={row} onClickId={handleClickId} />
+                  <StreamLine
+                    id={row._id}
+                    row={row}
+                    onClickId={handleClickId}
+                  />
                 ))
               : 'loading...'}
           </div>
@@ -460,10 +480,18 @@ function App({ wsEndpoint }) {
             )}
           </div>
         </StyledDataContainer>
-    </div>
+      </Stack>
+    </Stack>
   )
 }
 
+const Stack = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: ${({ flex }) => flex};
+  ${({ scroll }) => scroll && `overflow-y: auto`};
+`
+
 function StreamDelayBox({ delayState, setStreamCensored }) {
   const handleToggleStreamCensored = useCallback(() => {
     setStreamCensored(!delayState.isCensored)
@@ -805,7 +833,13 @@ const StyledStreamLine = styled.div`
 
 function main() {
   const script = document.getElementById('main-script')
-  render(<App wsEndpoint={script.dataset.wsEndpoint} />, document.body)
+  render(
+    <>
+      <GlobalStyle />
+      <App wsEndpoint={script.dataset.wsEndpoint} />
+    </>,
+    document.body,
+  )
 }
 
 main()