Merge pull request kodadot#4994 from Jarsen136/issue-4992

fix: explore tabs & btn responsive (mobile/tablet)
roiLeo · Feb 14, 2023 · 1f4a2f9 · 1f4a2f9
2 parents 316fc09 + dcd8a66
commit 1f4a2f9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/components/explore/ExploreIndex.vue b/components/explore/ExploreIndex.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="explore is-flex">
+  <div class="explore is-flex is-flex-wrap-wrap">
     <ExploreTabItem />
     <div class="explore-menu is-flex">
       <ExploreSort />

diff --git a/components/explore/ExploreTabItem.vue b/components/explore/ExploreTabItem.vue
@@ -75,9 +75,13 @@ a.disabled {
     width: 15rem;
   }
 
-  @include mobile {
-    .control,
-    &-button {
+  .control,
+  &-button {
+    @include until-widescreen {
+      width: 12rem;
+    }
+
+    @include mobile {
       width: 100%;
     }
   }

diff --git a/layouts/explore-layout.vue b/layouts/explore-layout.vue
@@ -21,7 +21,9 @@
           </div>
         </section>
         <hr class="m-0" />
-        <Nuxt />
+        <section class="section pt-0">
+          <Nuxt />
+        </section>
       </div>
     </main>
   </div>