fix: update mobile styles

src/components/base/BaseButton.vue

@@ -51,10 +51,10 @@ classes['t-rounded-md'] = !_rounded;
 classes['t-rounded-full'] = _rounded;
 
 // Paddings Size Normal
-classes['t-py-2.5 t-ps-3 t-pe-5'] = props.size === 'normal' && !!(_icon) && _iconPosition === 'left';
-classes['t-py-2.5 t-ps-5 t-pe-3'] = props.size === 'normal' && !!(_icon) && _iconPosition === 'right';
+classes['t-py-2 t-ps-3 t-pe-5'] = props.size === 'normal' && !!(_icon) && _iconPosition === 'left';
+classes['t-py-2 t-ps-5 t-pe-3'] = props.size === 'normal' && !!(_icon) && _iconPosition === 'right';
 classes['t-p-[0.6rem]'] = props.size === 'normal' && isIconOnly;
-classes['t-py-2.5 t-px-5'] = props.size === 'normal' && !_icon;
+classes['t-py-2 t-px-5'] = props.size === 'normal' && !_icon;
 
 // Paddings Size Small
 classes['t-py-1.5 t-ps-2 t-pe-3'] = props.size === 'small' && !!(_icon) && _iconPosition === 'left';
@@ -83,7 +83,7 @@ classes['focus-visible:t-ring-primary focus-visible:t-ring-opacity-25 dark:focus
 
 classes['focus-visible:t-ring-primary focus-visible:t-ring-opacity-25 dark:focus-visible:t-ring-primary dark:focus-visible:t-ring-opacity-50 t-bg-none t-text-primary hover:t-underline'] = props.display === 'link';
 
-classes['t-bg-white t-text-dark t-border t-border-zinc-400 focus:t-ring-zinc-300 focus:t-ring-opacity-50 hover:t-bg-zinc-100 dark:t-bg-zinc-800'] = props.display === 'mono';
+classes['t-bg-gray-300/75 t-text-gray-600 dark:t-text-gray-300 focus:t-ring-zinc-300 focus:t-ring-opacity-50 hover:t-bg-gray-300 hover:dark:t-bg-gray-700 dark:t-bg-gray-800'] = props.display === 'mono';
 
 classes['t-bg-none t-text-primary t-border t-border-primary focus:t-ring-zinc-300 focus:t-ring-opacity-50 hover:t-bg-primary-50 dark:hover:t-bg-zinc-800'] = props.display === 'outline';
 

src/components/base/BaseDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseButton
-    display="flat"
+    display="mono"
     icon="dropdown"
     icon-position="right"
     :text="buttonText"

src/components/header/GlobalHeader.vue

@@ -9,9 +9,9 @@
         <Tools/>
       </div>
     </div>
-    <div v-if="item" class="t-flex t-items-center">
+    <div v-if="item" class="t-flex md:t-items-center t-flex-col md:t-flex-row">
       <Navbar v-if="showNavbar"/>
-      <PanelsToggle v-if="showPanelsToggle" class="sm:t-ml-auto t-mt-4 md:t-mt-0" />
+      <PanelsToggle v-if="showPanelsToggle" class="md:t-ml-auto t-mt-4 md:t-mt-0" />
     </div>
   </div>
 </template>

src/components/header/TitleBar.vue

@@ -2,7 +2,7 @@
   <div class="t-flex t-flex-col t-justify-center">
     <template v-if="collectionTitle || manifestTitle">
       <template v-if="collectionTitle">
-        <h1 v-if="collectionTitle" class="t-text-2xl t-font-bold">
+        <h1 v-if="collectionTitle" class="sm:t-text-xl md:t-text-2xl t-font-bold">
           {{ collectionTitle }}
         </h1>
         <h2 v-if="manifestTitle" class="t-flex t-items-center t-flex-wrap t-text-xl t-mt-2 t-mb-6">
@@ -16,18 +16,18 @@
         </h2>
       </template>
       <template v-else>
-        <h1 class="t-flex t-items-center t-flex-wrap t-text-2xl t-font-bold t-mt-2 t-mb-4">
-          <span>{{ manifestTitle }}</span>
+        <h1 class="t-align-middle sm:t-text-xl md:t-text-2xl t-font-bold t-mt-2 t-mb-4">
+          <span class="t-align-middle">{{ manifestTitle }}</span>
           <BaseIcon
             v-if="item"
-            class="t-px-2 text-gray-500 dark:text-gray-300"
+            class="t-inline-flex t-align-middle t-px-2 text-gray-500 dark:text-gray-300"
             name="chevronRight"
           />
-          <span v-if="item">{{ labels.item }} {{ item.n }}</span>
+          <span v-if="item" class="t-align-middle">{{ labels.item }} {{ item.n }}</span>
         </h1>
       </template>
     </template>
-    <h1 v-else class="t-text-2xl t-font-bold t-mb-4 t-mt-2">
+    <h1 v-else class="sm:t-text-xl md:t-text-2xl t-font-bold t-mb-4 t-mt-2">
       TIDO Viewer
     </h1>
   </div>

src/components/panels/Panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="panel t-flex-1 t-flex t-flex-col t-overflow-hidden t-rounded-lg t-bg-gray-50 dark:t-bg-gray-800 t-border dark:t-border-gray-700">
+  <div class="panel t-flex t-flex-col t-overflow-hidden t-rounded-lg t-bg-gray-50 dark:t-bg-gray-800 t-border dark:t-border-gray-700">
     <div class="panel-header t-py-3 t-px-4 t-flex t-justify-between t-items-center">
       <div class="caption t-font-bold">
         <!-- We display the tab label as panel label when there is only one tab -->
@@ -16,7 +16,7 @@
     </div>
     <div class="t-h-[1px] dark:t-bg-gray-600 t-bg-gray-200 t-mx-4" />
     <div class="panel-body t-relative t-overflow-hidden t-flex t-flex-1 t-flex-col t-bg-none">
-      <div v-if="isLoading" class="t-absolute t-bottom-0 t-z-50 t-flex t-bg-gray-50 dark:t-bg-gray-800 t-w-full t-h-[94%] t-justify-center t-items-center">
+      <div v-if="isLoading" class="t-absolute t-bottom-0 t-z-50 t-flex t-bg-gray-50 dark:t-bg-gray-800 t-w-full t-h-[93%] t-justify-center t-items-center">
         <Loading  class="t-text-5xl" />
       </div>
       <template v-if="tabs.length > 1">

src/components/panels/PanelsWrapper.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="panels-wrapper t-flex t-flex-col t-flex-1 t-overflow-auto sm:t-flex-row t-space-x-4 t-px-4 lg:t-px-6 md:t-pb-4">
+  <div class="panels-wrapper t-flex t-flex-col md:t-overflow-auto t-flex-1 md:t-flex-row md:t-space-x-4 t-space-y-4 md:t-space-y-0 t-px-4 lg:t-px-6 md:t-pb-4">
     <Panel
       v-for="(panel, i) in panels"
       v-show="panel.show"
       :key="`pc${i}`"
       :panel="panel"
       :active-view="getActiveView(i)"
       @active-view="onActiveViewChange($event, i)"
-      class="t-flex-1"
+      class="t-flex-1 t-h-screen md:t-h-auto"
     />
   </div>
 </template>

src/css/preflight.scss

@@ -355,7 +355,6 @@
   */
 
   img,
-  svg,
   video,
   canvas,
   audio,