From 095b0287f0181b6a3fdec29e03d839a174f42cf0 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 5 Jan 2022 11:52:13 -0800
Subject: [PATCH] Fix call list styling

---
 src/home/CallList.jsx              |  2 ++
 src/home/CallList.module.css       | 12 ++++++++++--
 src/home/RegisteredView.module.css |  3 ++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/home/CallList.jsx b/src/home/CallList.jsx
index 8d8fc01a..1ccc9415 100644
--- a/src/home/CallList.jsx
+++ b/src/home/CallList.jsx
@@ -22,6 +22,8 @@ export function CallList({ rooms, client }) {
             participants={participants}
           />
         ))}
+        <div className={styles.callTileSpacer} />
+        <div className={styles.callTileSpacer} />
       </div>
     </>
   );
diff --git a/src/home/CallList.module.css b/src/home/CallList.module.css
index 7c658a6f..5fbd1635 100644
--- a/src/home/CallList.module.css
+++ b/src/home/CallList.module.css
@@ -1,5 +1,13 @@
+.callTileSpacer,
 .callTile {
   width: 329px;
+}
+
+.callTileSpacer {
+  height: 0;
+}
+
+.callTile {
   height: 95px;
   padding: 12px;
   background-color: var(--bgColor2);
@@ -51,8 +59,8 @@
 }
 
 .callList {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 329px);
+  display: flex;
+  flex-wrap: wrap;
   max-width: calc((329px + 24px) * 3);
   width: calc(100% - 48px);
   gap: 24px;
diff --git a/src/home/RegisteredView.module.css b/src/home/RegisteredView.module.css
index 9484b194..3783d5e5 100644
--- a/src/home/RegisteredView.module.css
+++ b/src/home/RegisteredView.module.css
@@ -1,7 +1,8 @@
 .form {
   padding: 0 24px;
   justify-content: center;
-  width: 409px;
+  max-width: 409px;
+  width: calc(100% - 48px);
   margin-bottom: 72px;
 }