Merge pull request #11538 from kodadot/fix--layout-classes

fix: mobile layout on gallery and collection detail page

Author: vikiival

components/Error.vue

@@ -28,7 +28,7 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    errorCode: number
+    errorCode?: number
     hasImg: boolean
     errorTitle: string
     errorSubtitle: string

components/shared/TabItem.vue

@@ -56,14 +56,23 @@ const icon = computed(() =>
 </script>
 
 <style scoped lang="scss">
+@import '@/assets/styles/abstracts/mixins';
+
 .control:not(:last-of-type) .explore-tabs-button {
   border-right: none;
 }
 
 .control,
 .explore-tabs-button {
   width: 15rem;
-  @apply bulma-until-widescreen:w-48 bulma-mobile:w-full;
+
+  @include bulma-mobile {
+    width: 100% !important;
+  }
+
+  @include bulma-until-widescreen {
+    width: 12rem;
+  }
 }
 
 .full-width {

layouts/gallery-item-layout.vue

@@ -2,10 +2,7 @@
   <div class="min-h-full flex flex-col overflow-hidden">
     <Navbar />
     <main class="flex-grow py-8">
-      <div
-        class="relative mx-auto my-0 max-lg:!px-0 min-h-[3.25rem] w-full"
-        :class="{ 'max-w-none md:!px-10 !px-5': !isTouch }"
-      >
+      <div class="container-fluid">
         <Error
           v-if="$nuxt.isOffline"
           :has-img="false"
@@ -29,12 +26,9 @@ const route = useRoute()
 useHead({
   link: [
     {
-      hid: 'canonical',
       rel: 'canonical',
       href: $config.public.baseUrl + route.path,
     },
   ],
 })
-
-const { isMobileOrTablet: isTouch } = useDevice()
 </script>