refactor: improve UI for small screens

1 files changed, 7 insertions, 2 deletions

diff --git a/src/components/Button.module.css b/src/components/Button.module.css
index f0ab4e1..8fb6a92 100644
--- a/src/components/Button.module.css
+++ b/src/components/Button.module.css
@@ -5,7 +5,6 @@
   background: var(--color-btn-bg);
   border: 1px solid #555;
   border-radius: 100px;
-  padding: 6px 12px;
   user-select: none;
   &:focus {
     border-color: var(--color-focus-blue);
@@ -14,9 +13,15 @@
     background: #387cec;
     border: 1px solid #387cec;
     color: #fff;
-    /* background: darken(#555, 3%); */
   }
   &:active {
     transform: scale(0.97);
   }
+
+  font-size: 0.85em;
+  padding: 5px 8px;
+  @media (--breakpoint-not-small) {
+    font-size: 1em;
+    padding: 6px 12px;
+  }
 }