From d49285f1e219abf91547aeee5e853632b21cefe1 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Fri, 4 Mar 2022 18:25:38 +0100
Subject: [PATCH] Some style tweaks to toggle input. Also added a v-key to
 children

---
 src/components/ui/ToggleButton.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/ToggleButton.vue b/src/components/ui/ToggleButton.vue
index faa83d1..9cce331 100644
--- a/src/components/ui/ToggleButton.vue
+++ b/src/components/ui/ToggleButton.vue
@@ -2,6 +2,7 @@
   <div class="toggle-container">
     <button
       v-for="option in options"
+      :key="option"
       class="toggle-button"
       @click="toggle(option)"
       :class="toggleValue === option ? 'selected' : null"
@@ -51,8 +52,8 @@ $background-selected: $background-color-secondary;
 
 .toggle-container {
   width: 100%;
-  max-width: 15rem;
   display: flex;
+  overflow-x: scroll;
   flex-direction: row;
   justify-content: center;
   align-items: center;
@@ -72,6 +73,8 @@ $background-selected: $background-color-secondary;
     background-color: $background;
     text-transform: capitalize;
     cursor: pointer;
+    display: block;
+    flex: 1 0 auto;
 
     &.selected {
       color: $text-color;