feat: improve height controll to avoid content hidden and colissions

packages/app/src/styles/components/actions-widget.css

@@ -1,6 +1,6 @@
 @layer components {
   .actionsWidget {
-    @apply flex items-center gap-1 p-4;
+    @apply flex gap-1 mt-6 self-start flex-1 items-end pb-0;
 
     @media (min-width: 834px) {
       @apply p-6 fixed bottom-0 left-0;

packages/app/src/styles/components/card.css

@@ -1,9 +1,9 @@
 @layer components {
   .card {
     @apply bg-gray-800 rounded-xl py-3;
-    min-width: calc(100vw - 40px);
+    min-width: 100%;
 
-    @media (min-width: 450px) {
+    @media (min-width: 640px) {
       min-width: 450px;
     }
   }

packages/app/src/styles/components/header.css

@@ -1,6 +1,6 @@
 @layer components {
   .header {
-    @apply sticky grid p-4 py-3 sm:py-4;
+    @apply sticky top-0 w-full grid p-4 pb-0;
   }
   .header--navContainer {
     @apply px-1 gap-1 flex bg-gray-800 rounded-xl sm:rounded-3xl;
@@ -20,6 +20,8 @@
   }
   .header img {
     grid-area: 1 / 1 / 2 / 2;
+    height: 40px;
+    width: 40px;
   }
   .header--wallet {
     @apply flex items-center gap-1;
@@ -37,6 +39,8 @@
     }
     .header img {
       grid-area: 1 / 1 / 2 / 2;
+      height: 46px;
+      width: 46px;
     }
     .header--wallet {
       place-self: center end;
@@ -56,6 +60,8 @@
     }
     .header img {
       grid-area: 1 / 1 / 2 / 2;
+      height: 46px;
+      width: 46px;
     }
     .header--wallet {
       place-self: center end;

packages/app/src/styles/components/home-page.css

@@ -2,6 +2,11 @@
   .homePage {
     @apply p-6 flex flex-col h-[100vh] justify-between bg-cover;
     background-image: url("/lp-bg.jpg");
+
+    @media (max-width: 640px) {
+      @apply mobile-fit-screen;
+      height: auto;
+    }
   }
 
   .homePage--header {

packages/app/src/styles/components/main-layout.css

@@ -2,12 +2,16 @@
   .mainLayout {
     @apply flex flex-col;
     @apply h-screen text-gray-100 overflow-hidden;
-    @apply grid;
-    grid-template-rows: auto 1fr auto;
+
+    @media (max-width: 640px) {
+      @apply mobile-fit-screen;
+      height: auto;
+    }
   }
   .mainLayout--wrapper {
-    @apply flex justify-center items-start p-4 pb-16 sm:pt-14 overflow-y-auto;
+    @apply flex flex-1 flex-col items-center p-4 pt-10 sm:pt-16 overflow-y-auto;
   }
+
   .mainLayout-errorContent {
     @apply w-[30rem] flex-1 rounded-xl p-4 m-2;
   }

packages/app/src/styles/components/welcome-page.css

@@ -6,13 +6,22 @@
     @media (min-width: 1024px) {
       grid-template-columns: 300px 1fr;
     }
+
+    @media (max-width: 640px) {
+      @apply mobile-fit-screen;
+      min-height: inherit;
+    }
   }
   .welcomePage--content {
     @apply relative m-8 grid place-items-center max-h-[100vh];
 
     @media (max-width: 640px) {
       @apply m-0 my-4;
     }
+
+    @media (max-height: 500px) {
+      @apply m-0 my-4;
+    }
   }
   /*
     WelcomeSidebar
@@ -84,16 +93,17 @@
     WelcomeStep
   */
   .welcomeStep {
-    @apply max-w-[350px] text-center text-gray-300;
+    @apply max-w-[350px] text-center text-gray-300 pb-6;
 
     h2 {
       @apply text-white text-2xl mb-4;
     }
     img {
       @apply mx-auto mb-5;
+      min-height: 100px;
 
-      @media (max-width: 640px) {
-        @apply max-w-[180px];
+      @media (max-height: 700px) {
+        max-height: calc(100vh / 3);
       }
     }
   }

packages/app/src/styles/utilities.css

@@ -13,4 +13,12 @@
   .inner-shadow {
     box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.2);
   }
+
+  .mobile-fit-screen {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
 }

packages/app/src/systems/Core/components/Header.tsx

@@ -60,8 +60,6 @@ export const Header = () => {
         src={relativeUrl("/fuel-logo-512x512.png")}
         alt="swayswap"
         className="cursor-pointer"
-        height={46}
-        width={46}
       />
       {wallet && (
         <div className="header--nav">

packages/app/src/systems/Core/components/MainLayout.tsx

@@ -32,8 +32,8 @@ export function MainLayout({ children }: MainLayoutProps) {
               children
             )}
           </ErrorBoundary>
+          {wallet && !ctx?.justContent && <ActionsWidget />}
         </div>
-        {wallet && !ctx?.justContent && <ActionsWidget />}
       </main>
     </>
   );

packages/app/src/systems/Core/components/TokenIcon.tsx

@@ -4,7 +4,7 @@ import type { Coin } from "~/types";
 
 const style = {
   icon: `inline-flex rounded-full border-2 border-transparent`,
-  iconLast: `last:ml-[-10px] last:z-10 border-gray-800`,
+  iconLast: `last:ml-[-10px] last:z-1 border-gray-800`,
 };
 
 type TokenIconProps = {

packages/app/src/systems/Mint/pages/MintPage.tsx

@@ -23,7 +23,7 @@ export function MintPage() {
 
   return (
     <MainLayout>
-      <Card className="sm:min-w-[450px]">
+      <Card>
         <Card.Title>
           <BiCoin className="text-primary-500" />
           Mint

packages/app/src/systems/Swap/pages/SwapPage.tsx

@@ -130,7 +130,7 @@ export function SwapPage() {
 
   return (
     <MainLayout>
-      <Card className="sm:min-w-[450px]">
+      <Card>
         <Card.Title>
           <MdSwapCalls className="text-primary-500" />
           Swap