From 37b90354337efb0257bd27da22adf789e8fd71d7 Mon Sep 17 00:00:00 2001
From: Taichi Kato <me@taichikato.com>
Date: Mon, 1 Jun 2020 12:30:23 +0800
Subject: [PATCH] Updated CSS to adopt better to mobile screens

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

diff --git a/public/css/chat.css b/public/css/chat.css
index aef5584..0a746cc 100644
--- a/public/css/chat.css
+++ b/public/css/chat.css
@@ -111,7 +111,9 @@ a {
 
 #wrapper {
   display: flex;
-  flex-direction: column;
+  /* flex: 1 1 20em; */
+  /* flex-basis: 30%; */
+  flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
   justify-content: center;
@@ -122,8 +124,8 @@ a {
   left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
-  width: 65%;
-  max-height: 100%;
+  width: 100%;
+  max-height: 90vh;
   max-width: 100%;
 }
 
@@ -146,7 +148,7 @@ a {
 }
 #remote-video:first-child:nth-last-child(1) {
 /* -or- li:only-child { */
-  max-height: 80vh;
+width: 80vw;
 }
 
 /* two items */
@@ -415,7 +417,22 @@ button:hover {
     margin: 0;
     line-height: 2rem;
   }
-
+  #wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, calc(-50% - 3rem));
+    max-height: 90%;
+    max-width: 100%;
+  }
   #remote-video {
     /* width: 75vw;
     height: calc((16/9) * 75vw); */