From 6fdb67255824011a16541850764e6bd9324b75bc Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Tue, 4 Feb 2025 12:08:52 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20.container.is-fluid=20to=20tailw?=
 =?UTF-8?q?ind?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/styles/global.scss                     | 19 +------------------
 components/ExploreLayoutWithSidebar.vue       |  2 +-
 components/Navbar.vue                         |  6 +++---
 components/collection/CollectionHeader.vue    |  2 +-
 .../CollectionHeader/CollectionBanner.vue     |  2 +-
 components/landing/HeroBanner.vue             |  4 ++--
 components/landing/LandingPage.vue            |  6 +++---
 components/swap/layout/index.vue              |  2 +-
 components/swap/review.vue                    |  2 +-
 layouts/default.vue                           |  2 +-
 layouts/explore-layout.vue                    |  2 +-
 layouts/gallery-item-layout.vue               |  7 +++----
 layouts/no-footer.vue                         |  2 +-
 layouts/teleport-layout.vue                   |  2 +-
 pages/[prefix]/explore/collectibles.vue       |  2 +-
 15 files changed, 22 insertions(+), 40 deletions(-)

diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index 3c41bb3488..a799533c93 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -103,23 +103,6 @@ body {
   }
 }
 
-.container.is-fluid {
-  padding-left: $fluid-container-padding;
-  padding-right: $fluid-container-padding;
-}
-
-@include mobile {
-  .column-padding {
-    padding-left: 10px !important;
-    padding-right: 10px !important;
-    margin: 0 -12px !important;
-  }
-  .container.is-fluid {
-    padding-left: $fluid-container-padding-mobile;
-    padding-right: $fluid-container-padding-mobile;
-  }
-}
-
 /* move to global */
 .is-ellipsis {
   @apply overflow-hidden whitespace-nowrap text-ellipsis;
@@ -238,4 +221,4 @@ table th {
       0px -1px 0 theme('text-color'),
       4px 4px theme('text-color');
   }
-}
\ No newline at end of file
+}
diff --git a/components/ExploreLayoutWithSidebar.vue b/components/ExploreLayoutWithSidebar.vue
index 22a69fcfc9..3d0f05f445 100644
--- a/components/ExploreLayoutWithSidebar.vue
+++ b/components/ExploreLayoutWithSidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="container is-fluid"
+    class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5"
     :class="{ '!pl-0': isSidebarOpen }"
   >
     <slot />
diff --git a/components/Navbar.vue b/components/Navbar.vue
index bdd07f74fb..8e422f179b 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -8,11 +8,11 @@
     }"
   >
     <div
-      class="container items-center max-lg:!px-0"
-      :class="{ 'is-fluid': !isTouch }"
+      class="grow relative mx-auto my-0 max-lg:!px-0 items-stretch flex min-h-[3.25rem] w-full"
+      :class="{ 'w-full max-w-none md:!px-10 !px-5': !isTouch }"
     >
       <!-- BRAND -->
-      <div class="navbar-brand">
+      <div class="navbar-brand ml-[-0.75rem]">
         <nuxt-link
           v-if="!isMobile || !openMobileSearchBar"
           to="/"
diff --git a/components/collection/CollectionHeader.vue b/components/collection/CollectionHeader.vue
index 781e4981f3..ea644691e2 100644
--- a/components/collection/CollectionHeader.vue
+++ b/components/collection/CollectionHeader.vue
@@ -5,7 +5,7 @@
       :collection="collection"
     />
     <section class="pt-5">
-      <div class="container is-fluid">
+      <div class="grow relative w-full max-w-none mx-auto my-0 !px-10">
         <CollectionInfo
           ref="collectionInfo"
           :collection-id="collectionId"
diff --git a/components/collection/CollectionHeader/CollectionBanner.vue b/components/collection/CollectionHeader/CollectionBanner.vue
index fba6821b77..ad8760714b 100644
--- a/components/collection/CollectionHeader/CollectionBanner.vue
+++ b/components/collection/CollectionHeader/CollectionBanner.vue
@@ -9,7 +9,7 @@
 
     <section class="h-full py-8">
       <div
-        class="container is-fluid collection-banner-content flex flex-col md:flex-row items-start md:items-end md:justify-between h-full"
+        class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5 collection-banner-content flex flex-col md:flex-row items-start md:items-end md:justify-between h-full"
       >
         <div class="lg:flex-1">
           <div class="flex flex-col items-start">
diff --git a/components/landing/HeroBanner.vue b/components/landing/HeroBanner.vue
index c61f71da77..59d764b698 100644
--- a/components/landing/HeroBanner.vue
+++ b/components/landing/HeroBanner.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="!pt-8 md:!pt-[3rem]">
-    <div class="container is-fluid flex max-md:flex-col max-md:gap-8 justify-center md:justify-between items-center">
+    <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5 flex max-md:flex-col max-md:gap-8 justify-center md:justify-between items-center">
       <h1
         class="text-3xl md:text-[39px] md:leading-9 font-bold flex max-md:flex-col max-md:text-center md:gap-3 md:flex-wrap"
       >
@@ -24,7 +24,7 @@
 
     <div
       :key="usePrefix().urlPrefix.value"
-      class="container is-fluid !mt-8 md:!mt-[3rem] mb-16"
+      class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5 !mt-8 md:!mt-[3rem] mb-16"
     >
       <CarouselTypeDrops />
     </div>
diff --git a/components/landing/LandingPage.vue b/components/landing/LandingPage.vue
index 1c065ed1bf..cc4b7c9460 100644
--- a/components/landing/LandingPage.vue
+++ b/components/landing/LandingPage.vue
@@ -10,20 +10,20 @@
         v-if="showTopCollections"
         class="py-8 instance"
       >
-        <div class="container is-fluid">
+        <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
           <LandingTopCollections class="my-5" />
         </div>
       </section>
 
       <section class="py-8 instance">
-        <div class="container is-fluid">
+        <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
           <!-- generative  -->
           <LazyCarouselTypeGenerative />
         </div>
       </section>
 
       <section class="py-8 instance">
-        <div class="container is-fluid">
+        <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
           <!-- latest sales -->
           <LazyCarouselTypeLatestSales />
 
diff --git a/components/swap/layout/index.vue b/components/swap/layout/index.vue
index 7c7a3e8037..70bbb00142 100644
--- a/components/swap/layout/index.vue
+++ b/components/swap/layout/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="container is-fluid flex flex-col">
+  <section class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5 flex flex-col">
     <div class="flex my-14 flex-wrap gap-10 justify-between">
       <slot name="title" />
 
diff --git a/components/swap/review.vue b/components/swap/review.vue
index 28b831bfaf..b633513d60 100644
--- a/components/swap/review.vue
+++ b/components/swap/review.vue
@@ -68,7 +68,7 @@
     <hr class="m-0">
 
     <div
-      class="container is-fluid flex flex-col gap-6 justify-between items-center !my-6 md:flex-row md:my-[3.5rem]"
+      class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5 flex flex-col gap-6 justify-between items-center !my-6 md:flex-row md:my-[3.5rem]"
     >
       <div class="w-[300px]">
         <TradeExpirationSelector
diff --git a/layouts/default.vue b/layouts/default.vue
index 502f2abf6f..be299c5b37 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,7 +2,7 @@
   <div class="min-h-full flex flex-col overflow-hidden">
     <Navbar />
     <main class="flex-grow py-8">
-      <div class="container is-fluid">
+      <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
         <Error
           v-if="$nuxt.isOffline"
           :has-img="false"
diff --git a/layouts/explore-layout.vue b/layouts/explore-layout.vue
index bdd9838d24..eaaa2a44d0 100644
--- a/layouts/explore-layout.vue
+++ b/layouts/explore-layout.vue
@@ -13,7 +13,7 @@
         <div v-else>
           <CollectionHeader v-if="isCollection" />
           <section class="py-7 px-0">
-            <div class="container is-fluid">
+            <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
               <h1
                 v-if="isExplore"
                 class="title"
diff --git a/layouts/gallery-item-layout.vue b/layouts/gallery-item-layout.vue
index c62363b257..3030abba5f 100644
--- a/layouts/gallery-item-layout.vue
+++ b/layouts/gallery-item-layout.vue
@@ -3,8 +3,8 @@
     <Navbar />
     <main class="flex-grow py-8">
       <div
-        class="container"
-        :class="{ 'is-fluid': !isFullHD }"
+        class="grow relative mx-auto my-0 max-lg:!px-0 items-stretch flex min-h-[3.25rem] w-full"
+        :class="{ 'w-full max-w-none md:!px-10 !px-5': !isTouch }"
       >
         <Error
           v-if="$nuxt.isOffline"
@@ -36,6 +36,5 @@ useHead({
   ],
 })
 
-const { width } = useWindowSize()
-const isFullHD = computed(() => width.value >= 1440)
+const { isMobileOrTablet: isTouch } = useDevice()
 </script>
diff --git a/layouts/no-footer.vue b/layouts/no-footer.vue
index bcd017654e..bea668742f 100644
--- a/layouts/no-footer.vue
+++ b/layouts/no-footer.vue
@@ -2,7 +2,7 @@
   <div class="min-h-full flex flex-col overflow-hidden">
     <Navbar />
     <main class="flex-grow py-8">
-      <div class="container is-fluid">
+      <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
         <Error
           v-if="$nuxt.isOffline"
           :has-img="false"
diff --git a/layouts/teleport-layout.vue b/layouts/teleport-layout.vue
index 6e3aa4ed4d..302c2da289 100644
--- a/layouts/teleport-layout.vue
+++ b/layouts/teleport-layout.vue
@@ -2,7 +2,7 @@
   <div class="min-h-full flex flex-col overflow-hidden">
     <Navbar />
     <main class="flex-grow">
-      <div class="container is-fluid">
+      <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
         <Error
           v-if="$nuxt.isOffline"
           :has-img="false"
diff --git a/pages/[prefix]/explore/collectibles.vue b/pages/[prefix]/explore/collectibles.vue
index 3a7936ba44..4c10dee425 100644
--- a/pages/[prefix]/explore/collectibles.vue
+++ b/pages/[prefix]/explore/collectibles.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container is-fluid">
+  <div class="grow relative w-full max-w-none mx-auto my-0 md:!px-10 !px-5">
     <CollectionGridWithBreadcrumbs />
   </div>
 </template>