UI fixes (#2275)

* Update Products.html

* Fix tutorials dropdown issue

* fix selected menu

---------

Co-authored-by: Yashovardhan Agrawal <21066442+yashovardhan@users.noreply.github.com>
Co-authored-by: Alexandra Tran <alexandratran@protonmail.com>

Author: yashovardhan

src/components/NavDropdown/Products.html

@@ -2,7 +2,7 @@
   <span class="product-selection-menu">
     <ul>
       <li>
-        <a href="/sdk" id="metamask-sdk-menu-button" onfocus='
+        <a href="/sdk" id="metamask-sdk-menu-button" class="selected" onfocus='
                     document.getElementById("metamask-sdk-menu-button").classList.add("selected");
                     document.getElementById("metamask-sdk-menu").classList.add("selected-menu");
                     document.getElementById("delegation-toolkit-menu-button").classList.remove("selected");
@@ -25,7 +25,7 @@ <h2>Connect to MetaMask</h2>
         </a>
       </li>
       <li>
-        <a href="/embedded-wallets" id="embedded-wallets-button" class="selected" onfocus='
+        <a href="/embedded-wallets" id="embedded-wallets-button" onfocus='
                     document.getElementById("embedded-wallets-button").classList.add("selected");
                     document.getElementById("embedded-wallets").classList.add("selected-menu");
                     document.getElementById("delegation-toolkit-menu-button").classList.remove("selected");
@@ -95,7 +95,7 @@ <h2>Extend and scale</h2>
       </li>
     </ul>
   </span>
-  <span class="sdk-selection-menu" id="metamask-sdk-menu">
+  <span class="sdk-selection-menu selected-menu" id="metamask-sdk-menu">
     <ul>
       <li>
         <a href="/sdk/">
@@ -137,7 +137,7 @@ <h2>Wallet API</h2>
       </li>
     </ul>
   </span>
-  <span class="sdk-selection-menu selected-menu" id="embedded-wallets">
+  <span class="sdk-selection-menu" id="embedded-wallets">
     <ul>
       <li>
         <a href="/embedded-wallets/sdk/react">

src/components/TutorialsPage/CustomSelect.module.css

@@ -7,6 +7,7 @@
   font-size: 14px;
   line-height: 125%;
   box-sizing: border-box;
+  overflow: visible;
 }
 
 .control {
@@ -181,7 +182,7 @@
   box-shadow:
     0 4px 6px -1px rgb(0 0 0 / 10%),
     0 2px 4px -1px rgb(0 0 0 / 6%);
-  z-index: 1000;
+  z-index: 9999;
   position: absolute;
   top: 100%;
   left: 0;

src/components/TutorialsPage/styles.module.css

@@ -34,7 +34,7 @@
   justify-content: space-between;
   max-width: 100%;
   box-sizing: border-box;
-  overflow-x: hidden;
+  overflow: visible;
 }
 
 .article {
@@ -152,7 +152,7 @@
   align-items: flex-start;
   gap: 24px;
   padding: 0 8px;
-  overflow-x: hidden;
+  overflow: visible;
 }
 
 .searchArea {
@@ -162,7 +162,7 @@
   align-items: center;
   justify-content: flex-start;
   gap: 16px;
-  overflow-x: hidden;
+  overflow: visible;
 }
 
 .searchInput {
@@ -667,7 +667,7 @@ html[data-theme='dark'] mark {
   .searchArea {
     justify-content: flex-start;
     width: 100%;
-    overflow-x: hidden;
+    overflow: visible;
   }
 }
 

src/pages/tutorials/flutter-wallet.mdx

@@ -2,7 +2,7 @@
 title: Create a chain-agnostic web3 wallet in Flutter
 image: 'img/tutorials/tutorials-banners/flutter-wallet.png'
 description: Empower your Flutter app with a chain-agnostic web3 wallet using the Web3Auth PnP SDK.
-tags: [embedded wallets, flutter, andriod, ios, evm, solana, web3auth]
+tags: [embedded wallets, flutter, android, ios, evm, solana, web3auth]
 date: April 22, 2024
 author: MetaMask Developer Relations
 ---