SOV-4199: Fix mobile layout (#936)

* chore: fix mobile view

* Create kind-candles-add.md

Author: pietro-maximoff

.changeset/kind-candles-add.md

@@ -0,0 +1,6 @@
+---
+"frontend": patch
+"@sovryn/ui": patch
+---
+
+SOV-4199: Fix mobile layout

apps/frontend/src/app/3_organisms/Header/Header.tsx

@@ -93,16 +93,20 @@ export const Header: FC = () => {
           </div>
         }
         extraContent={
-          <div className="flex space-x-4 items-center">
+          <div className="flex lg:space-x-4 items-center flex-wrap lg:flex-nowrap flex-col-reverse lg:flex-row lg:justify-start">
             {isRskChain(chainId) && (
               <Button
                 text={t(translations.header.nav.claimPowa)}
                 style={ButtonStyle.primary}
-                className="bg-[#24BFB74D]/[0.3] border-[#24BFB74D]/[0.3] hover:bg-[#24BFB74D]"
+                className="bg-[#24BFB74D]/[0.3] border-[#24BFB74D]/[0.3] hover:bg-[#24BFB74D] mt-2 lg:mt-0 w-full lg:w-auto lg:hidden xl:block"
                 onClick={() => navigate('/claim-POWA')}
               />
             )}
-            {account && <BridgeMenuItem dataAttribute="dapp-header-bridges" />}
+            {account && (
+              <div className="w-full lg:w-auto mt-2 lg:mt-0">
+                <BridgeMenuItem dataAttribute="dapp-header-bridges" />
+              </div>
+            )}
           </div>
         }
       />

apps/frontend/src/app/3_organisms/Header/components/BridgeMenuItem/BridgeMenuItem.tsx

@@ -91,7 +91,7 @@ export const BridgeMenuItem: FC<BridgeMenuItemProps> = ({ dataAttribute }) => {
     <NavDropdown
       text={t('header.nav.bridges.title')}
       className={classNames(
-        'rounded-b-none text-gray-30 font-normal text-sm hover:bg-gray-70 hover:text-gray-10 min-w-auto w-full lg:w-auto lg:rounded bg-gray-70 border-gray-50',
+        'text-gray-30 font-normal text-sm hover:bg-gray-70 hover:text-gray-10 min-w-auto w-full lg:w-auto rounded bg-gray-70 border-gray-50',
       )}
       closeOnClick={!isMobile}
       dataAttribute={dataAttribute}
@@ -117,7 +117,7 @@ export const BridgeMenuItem: FC<BridgeMenuItemProps> = ({ dataAttribute }) => {
           label={
             !isMobile && isRskChain(chainId)
               ? t('header.nav.bridges.subMenu.btcBridgeDescription')
-              : t('header.nav.bridges.subMenu.btcBridgeDescription_BOB')
+              : t('header.nav.bridges.subMenu.ethBridgeDescription')
           }
           dataAttribute={`dapp-menu-btcBridge`}
           className={classNames('no-underline', {

packages/ui/src/2_molecules/Header/Header.module.css

@@ -43,15 +43,15 @@
 }
 
 .mobileContent {
-  @apply mb-14 flex flex-row items-center justify-between w-full lg:hidden;
+  @apply mb-6 flex flex-wrap flex-row items-center justify-between w-full lg:hidden;
 }
 
 .mobileContentLogo {
   @apply justify-self-start;
 }
 
 .mobileExtraContent {
-  @apply justify-self-end;
+  @apply justify-self-end w-full;
 }
 
 .extraContentDesktop {