From 77188ead7b3bb115f1077a9f3157eb62ce8cdf42 Mon Sep 17 00:00:00 2001
From: Taichi Kato <me@taichikato.com>
Date: Sun, 31 May 2020 13:06:18 +0800
Subject: [PATCH] Updated UI to display 4 users nicely

---
 public/css/chat.css | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/public/css/chat.css b/public/css/chat.css
index 6c6799b..aef5584 100644
--- a/public/css/chat.css
+++ b/public/css/chat.css
@@ -110,8 +110,10 @@ a {
 }
 
 #wrapper {
-  display: grid;
-  grid-gap: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-wrap: wrap;
   justify-content: center;
   padding: 0;
   margin: 0;
@@ -142,12 +144,33 @@ a {
   border-radius: 0 0 10px 10px;
   padding: 10px;
 }
+#remote-video:first-child:nth-last-child(1) {
+/* -or- li:only-child { */
+  max-height: 80vh;
+}
+
+/* two items */
+#remote-video:first-child:nth-last-child(2),
+#remote-video:first-child:nth-last-child(2) ~ #remote-video {
+  max-height: 40vh;
+}
+
+/* three items */
+#remote-video:first-child:nth-last-child(3),
+#remote-video:first-child:nth-last-child(3) ~ #remote-video {
+  max-height: 40vh;
+}
+
+/* four items */
+#remote-video:first-child:nth-last-child(4),
+#remote-video:first-child:nth-last-child(4) ~ #remote-video {
+  max-height: 40vh;
+}
 
 #remote-video {
   padding: 0;
-  margin: 0;
-  width: 100%;
-  height: auto;
+  margin: 10px;
+  width: auto;
   border-radius: 10px;
   background-image: url(../images/loader.gif);
   background-size: 400px auto;