Make layout mathematical

apps/streams.js

     },
 }
 const StreamContainer = {
-    getColumns() {
-        const n = State.online.length
-        if(n > 5 * 5) return '1fr 1fr 1fr 1fr 1fr 1fr'
-        if(n > 4 * 4) return '1fr 1fr 1fr 1fr 1fr'
-        if(n > 3 * 3) return '1fr 1fr 1fr 1fr'
-        if(n > 2 * 2) return '1fr 1fr 1fr'
-        if(n > 1 * 1) return '1fr 1fr'
-        return '1fr'
-    },
-    getRows() {
-        const n = State.online.length
-        if(n > 5 * 6) return '1fr 1fr 1fr 1fr 1fr 1fr'
-        if(n > 4 * 5) return '1fr 1fr 1fr 1fr 1fr'
-        if(n > 3 * 4) return '1fr 1fr 1fr 1fr'
-        if(n > 2 * 3) return '1fr 1fr 1fr'
-        if(n > 1 * 2) return '1fr 1fr'
-        return '1fr'
-    },
     view() {
-        const dims = [StreamContainer.getRows(), StreamContainer.getColumns()]
+        const dims = [
+            Math.floor((1 + Math.sqrt(4 * State.online.length - 3)) / 2),
+            Math.ceil(Math.sqrt(State.online.length)),
+        ].map(n => Array(n).fill('1fr').join(' '))
+
         if(innerHeight > innerWidth) dims.reverse()
         const style = {
             backgroundColor: 'black',