fix(mobile): Update layout to better fit mobile devices

components/settings/panel/tabHeader.vue

@@ -1,6 +1,7 @@
-<template>
-  <div class="flex-1 h-full p-2 cursor-pointer text-center flex flex-row space-x-1 items-center justify-center select-none rounded-lg box-border transition-colors mx-1 first-of-type:ml-0 last-of-type:mr-0" :class="[{ 'bg-gray-200 dark:bg-gray-800': !active, 'bg-primary text-white': active }]" @click="clicked">
-    <slot />
+<template functional>
+  <div class="flex-1 h-full p-2 cursor-pointer text-center flex flex-row space-x-1 items-center justify-center select-none rounded-lg box-border transition-colors mx-1 first-of-type:ml-0 last-of-type:mr-0" :class="[{ 'bg-gray-200 dark:bg-gray-800': !props.active, 'bg-primary text-white px-3 md:px-2': props.active }]" v-bind="data.attrs" v-on="listeners">
+    <slot name="icon" />
+    <span :class="[{ 'hidden md:block': !props.active }]" v-text="props.text" />
   </div>
 </template>
 
@@ -10,12 +11,11 @@ export default {
     active: {
       type: Boolean,
       default: false
-    }
-  },
+    },
 
-  methods: {
-    clicked (event) {
-      this.$emit('click', event)
+    text: {
+      type: String,
+      default: ''
     }
   }
 }

components/settings/settingsPanel.vue

@@ -96,12 +96,12 @@
                 <div v-text="$i18n.t('settings.about.madeby')" />
                 <div class="mt-8 flex flex-col justify-center items-center">
                   <!-- Support links -->
-                  <div class="mt-3 flex flex-row space-x-2">
-                    <a href="https://www.github.com/Hanziness/AnotherPomodoro?utm_source=AnotherPomodoro&utm_medium=web&utm_content=settings" class="rounded-full bg-black hover:bg-gray-700 active:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-800 text-white flex flex-row items-center px-3 py-2 space-x-1 transition-colors">
+                  <div class="mt-3 flex flex-row space-x-2 text-center">
+                    <a href="https://www.github.com/Hanziness/AnotherPomodoro?utm_source=AnotherPomodoro&utm_medium=web&utm_content=settings" class="rounded-full bg-black hover:bg-gray-700 active:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-800 text-white flex flex-row items-center px-4 py-2 space-x-1 transition-colors">
                       <AboutGithub />
                       <span v-text="$i18n.t('settings.about.source')" />
                     </a>
-                    <a href="https://www.buymeacoffee.com/imreg?utm_source=AnotherPomodoro&utm_medium=web&utm_content=settings" class="rounded-full bg-yellow-300 hover:bg-yellow-200 active:bg-yellow-400 text-black flex flex-row items-center px-3 py-2 space-x-1 transition-colors">
+                    <a href="https://www.buymeacoffee.com/imreg?utm_source=AnotherPomodoro&utm_medium=web&utm_content=settings" class="rounded-full bg-yellow-300 hover:bg-yellow-200 active:bg-yellow-400 text-black flex flex-row items-center px-4 py-2 space-x-1 transition-colors">
                       <AboutSupport />
                       <span v-text="$i18n.t('settings.about.support')" />
                     </a>
@@ -128,17 +128,25 @@
 
       <!-- Tab bar -->
       <div class="flex-none h-20 flex flex-row p-4">
-        <TabHeader :active="activeTab === 1" @click="activeTab = 1">
-          <TabIconGeneral /> <span>{{ $i18n.t('settings.tabs.main') }}</span>
+        <TabHeader :active="activeTab === 1" :text="$i18n.t('settings.tabs.main')" @click="activeTab = 1">
+          <template #icon>
+            <TabIconGeneral />
+          </template>
         </TabHeader>
-        <TabHeader :active="activeTab === 2" @click="activeTab = 2">
-          <TabIconSchedule /> <span>{{ $i18n.t('settings.tabs.timer') }}</span>
+        <TabHeader :active="activeTab === 2" :text="$i18n.t('settings.tabs.timer')" @click="activeTab = 2">
+          <template #icon>
+            <TabIconSchedule />
+          </template>
         </TabHeader>
-        <TabHeader :active="activeTab === 3" @click="activeTab = 3">
-          <TabIconVisuals /> <span>{{ $i18n.t('settings.tabs.display') }}</span>
+        <TabHeader :active="activeTab === 3" :text="$i18n.t('settings.tabs.display')" @click="activeTab = 3">
+          <template #icon>
+            <TabIconVisuals />
+          </template>
         </TabHeader>
-        <TabHeader :active="activeTab === 4" @click="activeTab = 4">
-          <TabIconAbout /> <span>{{ $i18n.t('settings.tabs.about') }}</span>
+        <TabHeader :active="activeTab === 4" :text="$i18n.t('settings.tabs.about')" @click="activeTab = 4">
+          <template #icon>
+            <TabIconAbout />
+          </template>
         </TabHeader>
       </div>
     </div>

components/timer/display/timerApproximate.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['timer-display', { 'active': running }]">
+  <div :class="['timer-display select-none text-3xl md:text-7xl xl:text-9xl', { 'active': running }]">
     <transition name="transition-approximate-up" mode="out-in">
       <div :key="value" class="timer-approximate">
         {{ value }}
@@ -25,11 +25,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-div.timer-approximate {
-  user-select: none;
-  font-size: 8vw;
-}
-
 div.timer-approximate.transition-approximate-up-enter-active,
 div.timer-approximate.transition-approximate-up-leave-active {
   transition: 300ms ease-out;

components/timer/display/timerPercentage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="timer-percentage timer-display" :class="[{ 'active': running }]">
+  <div class="timer-percentage select-none text-8xl md:text-[14rem] font-bold timer-display" :class="[{ 'active': running }]">
     <transition name="transition-percentage" tag="span" mode="out-in">
       <span :key="timerValue" class="relative inline-block" v-text="timerValue" />
     </transition>
@@ -27,16 +27,8 @@ export default {
 @import '@/assets/scss/SourceSansPro_Numbers.scss';
 
 div.timer-percentage {
-  font-size: 40vh;
-  font-weight: 700;
   font-family: 'Source Sans Pro', monospace;
 }
-
-span.timer-percentage-value {
-  position: relative;
-  display: inline-block;
-}
-
 .transition-percentage-enter-active,
 .transition-percentage-leave-active {
   transition: 300ms ease-out;

components/timer/display/timerTraditional.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['timer-traditional timer-display', { 'active': running }]" v-text="$dayjs.formatMs(timeOriginal - timeElapsed, {})" />
+  <div :class="['timer-traditional font-bold text-7xl lg:text-[14rem] timer-display', { 'active': running }]" v-text="$dayjs.formatMs(timeOriginal - timeElapsed, {})" />
 </template>
 
 <script>
@@ -15,8 +15,6 @@ export default {
 
 .timer-traditional {
   font-family: 'Source Sans Pro', monospace;
-  font-size: 20vw;
-  font-weight: 700;
   font-variant-numeric: tabular-nums;
   font-feature-settings: "lnum" on;
   letter-spacing: 0.5rem;

pages/index.vue

@@ -27,7 +27,7 @@
           <!-- App title and CTAs -->
           <Transition name="main-appear" appear>
             <div class="transition-all duration-1000 flex flex-col justify-center" :class="{ 'opacity-0 -translate-x-4': !loading.mainText }">
-              <div class="flex flex-row items-start mr-16">
+              <div class="flex flex-row items-start xl:mr-16">
                 <!-- App icon -->
                 <div class="mr-4 mt-1 min-w-max min-h-max">
                   <nuxt-img :alt="$i18n.t('index.alt.img.icon')" src="/favicon.png" width="68" height="68" class="bg-red-200 rounded-lg p-2" />
@@ -102,7 +102,7 @@
     </Section>
 
     <!-- Section 2: about Pomodoro and the app -->
-    <Section ref="section-2" class="snap-center bg-sky-100 justify-center flex flex-col overflow-hidden">
+    <Section ref="section-2" class="snap-center bg-sky-100 justify-center flex flex-col overflow-hidden px-2">
       <div class="mt-8 text-sky-900 flex flex-col items-center">
         <h2 class="text-5xl font-bold uppercase tracking-tight" v-text="$i18n.t('index.section_whatitdoes.title')" />
         <div class="mt-2 text-lg xl:text-xl text-center">
@@ -191,7 +191,7 @@
       </div>
 
       <template #after>
-        <div class="absolute bottom-4 flex flex-col justify-center items-center">
+        <div class="absolute bottom-20 xl:bottom-4 flex flex-col justify-center items-center">
           <div class="" v-text="$i18n.t('index.support.credits')" />
           <div class="mt-1 px-2 py-1 bg-gray-800 text-gray-50 rounded-lg select-none" v-text="$store.state.version" />
         </div>