From f73246768fc12512988020f2706f206e341aa14c Mon Sep 17 00:00:00 2001
From: Eric Eastwood <contact@ericeastwood.com>
Date: Thu, 8 Sep 2022 22:32:06 -0500
Subject: [PATCH] Bigger more clickable buttons on mobile (#69)

Bigger more clickable buttons on mobile. Feels a lot better on a phone. The buttons already have invisible margin in their hitbox but the bigger size makes your thumb less cramped to the edge to click them.

Also reduce the container padding so it feels more balanced in the single column card layout.
---
 public/css/room-directory.css | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/public/css/room-directory.css b/public/css/room-directory.css
index 60542e4..e808e40 100644
--- a/public/css/room-directory.css
+++ b/public/css/room-directory.css
@@ -95,7 +95,7 @@
 
 .RoomDirectoryView_paginationButton {
   display: inline-block;
-  padding: 4px 16px;
+  padding: 8px 32px;
   background-color: #17191c;
   border-radius: 9999px;
   color: #ffffff;
@@ -103,6 +103,12 @@
   text-decoration: none;
 }
 
+@media (min-width: 750px) {
+  .RoomDirectoryView_paginationButton {
+    padding: 4px 16px;
+  }
+}
+
 .RoomDirectoryView_paginationButton:not([href]) {
   background-color: rgba(23, 25, 28, 0.7);
   color: #bbbbbb;
@@ -113,15 +119,18 @@
   gap: 20px;
   width: 100%;
   max-width: 1180px;
-  padding-left: 40px;
-  padding-right: 40px;
-  margin-top: 40px;
+  padding-left: 20px;
+  padding-right: 20px;
+  margin-top: 20px;
   margin-bottom: 0;
 }
 
 @media (min-width: 750px) {
   .RoomDirectoryView_roomList {
     grid-template-columns: repeat(2, 1fr);
+    padding-left: 40px;
+    padding-right: 40px;
+    margin-top: 40px;
   }
 }
 
@@ -226,7 +235,7 @@
 
 .RoomCardView_viewButton {
   display: inline-block;
-  padding: 4px 16px;
+  padding: 8px 32px;
 
   background-color: #17191c;
   /* Always make a pill shape */
@@ -237,6 +246,12 @@
   text-decoration: none;
 }
 
+@media (min-width: 750px) {
+  .RoomCardView_viewButton {
+    padding: 4px 16px;
+  }
+}
+
 .RoomCardView_viewButtonWrapperLink:hover > .RoomCardView_viewButton,
 .RoomCardView_viewButtonWrapperLink:focus > .RoomCardView_viewButton {
   background-color: #0098d4;