From 72fdfc1192de101c2b1868db2a2824c0e4f8be55 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 12 Apr 2023 06:14:19 -0700
Subject: [PATCH] Fix ElementToggle on smaller devices

---
 components/ElementToggle/index.scss | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/ElementToggle/index.scss b/components/ElementToggle/index.scss
index 6ce7af42..595458df 100644
--- a/components/ElementToggle/index.scss
+++ b/components/ElementToggle/index.scss
@@ -8,6 +8,12 @@
   height: $height;
   gap: calc($unit / 4);
   padding: calc($unit / 2);
+  flex-wrap: wrap;
+
+  @include breakpoint(phone) {
+    border-radius: $unit-2x;
+    height: auto;
+  }
 
   .ToggleItem {
     background: var(--toggle-bg);
@@ -16,7 +22,14 @@
     color: var(--input-secondary);
     flex-grow: 1;
     font-size: $font-regular;
-    padding: ($unit) $unit * 2;
+    padding-top: $unit;
+    padding-bottom: $unit;
+
+    @include breakpoint(phone) {
+      border-radius: $card-corner;
+      padding-left: $unit-2x;
+      padding-right: $unit-2x;
+    }
 
     &.ja {
       padding-top: 6px;