From 6aa16dc26a94dbefc9138f3d96f786031c9d1cfa Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Sun, 5 Sep 2021 11:49:04 +0100
Subject: [PATCH] improve tab nav buttons on small screens

---
 src/component/tab/index.css | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/component/tab/index.css b/src/component/tab/index.css
index eddcbcc0..941ced9a 100644
--- a/src/component/tab/index.css
+++ b/src/component/tab/index.css
@@ -32,16 +32,21 @@
   flex-grow: 1;
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   gap: calc((var(--tab-size) / 4) * 0.125em);
 }
 
 .tab-nav-button {
+  background-color: transparent;
   flex-grow: 1;
+  flex-basis: 25%;
+  z-index: 2;
 }
 
-.tab-nav-button {
-  background-color: transparent;
-  z-index: 2;
+@media (min-width: 600px) {
+  .tab-nav-button {
+    flex-basis: auto;
+  }
 }
 
 .tab-nav-button.active {
@@ -65,7 +70,7 @@
 
 .tab-nav-indicator-active .tab-nav-indicator {
   animation: none;
-  transition: left var(--layout-transition-extra-fast), width var(--layout-transition-extra-fast);
+  transition: top var(--layout-transition-extra-fast), left var(--layout-transition-extra-fast), width var(--layout-transition-extra-fast), height var(--layout-transition-extra-fast);
 }
 
 .tab-content {