From f1ea3791bac59ce0d0ff61d7e86ee691741a2b0a Mon Sep 17 00:00:00 2001
From: Moritz Ruth <dev@moritzruth.de>
Date: Mon, 17 Jun 2024 15:32:27 +0200
Subject: [PATCH] Change padding on small screens

---
 src/components/NavigationMenuWrapper.vue  | 18 +++++++++---------
 src/components/specific/TypeOfTeaForm.vue |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/NavigationMenuWrapper.vue b/src/components/NavigationMenuWrapper.vue
index 4385de2..691bfaa 100644
--- a/src/components/NavigationMenuWrapper.vue
+++ b/src/components/NavigationMenuWrapper.vue
@@ -1,29 +1,29 @@
 <template>
-	<nav class="w-full lg:w-70 fixed z-100 lg:top-0 left-0 bottom-0 lg:py-8 flex flex-col gap-3 <lg:border-t-solid lg:border-r-solid border-1 border-gray-300 bg-gray-100">
-    <div class="<lg:hidden font-serif font-400 text-4xl pl-7 pb-2">
+	<nav class="w-full md:w-60 lg:w-70 fixed z-100 md:top-0 left-0 bottom-0 md:py-8 flex flex-col gap-3 <md:border-t-solid md:border-r-solid border-1 border-gray-300 bg-gray-100">
+    <div class="<md:hidden font-serif font-400 text-4xl pl-7 pb-2">
       Teavail
     </div>
-		<ul class="list-none m-0 p-0 flex lg:flex-col <lg:justify-evenly gap-2">
+		<ul class="list-none m-0 p-0 flex md:flex-col <md:justify-evenly gap-2">
 			<li v-for="item in items" :key="item.target">
 				<router-link
-					class="relative w-full <lg:px-3 py-2 lg:pl-8 flex <lg:flex-col items-center lg:gap-4 bg-orange-800 bg-opacity-0"
+					class="relative w-full <md:px-3 py-2 md:pl-8 flex <md:flex-col items-center md:gap-4 bg-orange-800 bg-opacity-0"
           :class="$style.item"
 					:to="item.target"
-          :active-class="item.matchExact ? null : $style.active"
-          :exact-active-class="item.matchExact ? $style.active : null"
+          :active-class="item.matchExact ? undefined : $style.active"
+          :exact-active-class="item.matchExact ? $style.active : undefined"
 				>
-					<div class="text-2xl lg:text-3xl relative" :class="$style.icons" :style="{ top: item.icon.yOffset === undefined ? undefined : `${item.icon.yOffset}px` }">
+					<div class="text-2xl md:text-3xl relative" :class="$style.icons" :style="{ top: item.icon.yOffset === undefined ? undefined : `${item.icon.yOffset}px` }">
             <component class="absolute inset-0 opacity-0" :is="item.icon.normal"/>
             <component class="duration-200" :is="item.icon.duotone"/>
           </div>
-					<div class="text-sm lg:text-lg text-center" :class="$style.label">
+					<div class="text-sm md:text-lg text-center" :class="$style.label">
             {{ item.label }}
           </div>
 				</router-link>
 			</li>
 		</ul>
 	</nav>
-	<div class="lg:pl-80 pb-20">
+	<div class="md:pl-65 lg:pl-80 pb-20">
 		<slot/>
 	</div>
 </template>
diff --git a/src/components/specific/TypeOfTeaForm.vue b/src/components/specific/TypeOfTeaForm.vue
index ff5c6eb..120d30c 100644
--- a/src/components/specific/TypeOfTeaForm.vue
+++ b/src/components/specific/TypeOfTeaForm.vue
@@ -1,6 +1,6 @@
 <template>
   <form class="flex gap-4 w-full flex-col" @submit.prevent="onSubmit()">
-    <div class="flex gap-4 w-full <lg:flex-col">
+    <div class="flex gap-4 w-full <md:flex-col">
       <FieldWrapper class="flex-grow" label="Name" v-slot="{ inputId }">
         <TextualInput v-model="data.name" type="normal" :id="inputId" :disabled="isLoading"/>
       </FieldWrapper>