chore: fix mobile user login and dropdown on mobile

src/components/Header/Header.module.scss

@@ -27,7 +27,8 @@
   }
 
   .burgerMenu,
-  .closeButton {
+  .closeButton,
+  .mobileUserProfile {
     display: none;
   }
 
@@ -133,6 +134,19 @@
       }
     }
 
+    & .mobileUserProfile {
+      display: block;
+      position: absolute;
+      right: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+      opacity: 1;
+      visibility: visible;
+      transition:
+        opacity 0.3s,
+        visibility 0.3s;
+    }
+
     & .closeButton {
       display: block;
       position: absolute;
@@ -165,6 +179,11 @@
   }
 
   .header.openedSidebar {
+    & .mobileUserProfile {
+      opacity: 0;
+      visibility: hidden;
+    }
+
     & .closeButton {
       right: 1rem;
     }
@@ -350,6 +369,11 @@
   }
 
   .header.openedSidebar {
+    & .mobileUserProfile {
+      opacity: 0;
+      visibility: hidden;
+    }
+
     & .closeButton {
       right: 1rem;
     }

src/components/Header/Header.tsx

@@ -144,6 +144,21 @@ const Header: FC = () => {
           <div />
           <div />
         </div>
+        {isSmallScreen && (
+          <div className={styles.mobileUserProfile}>
+            <UserProfile
+              setAccountData={setAccountData}
+              isLoggedIn={!!accountData}
+              isDarkTheme={isDarkTheme}
+              username={accountData?.username}
+              setOpenLoginModal={setOpenLogin}
+              userImage={accountData?.picture}
+              handleOpenSettings={handleOpenSettings}
+              hideDropdown={isOpenedSidebar}
+              hideUsername
+            />
+          </div>
+        )}
         <div>
           <Navbar
             handleToggleSidebar={handleToggleSidebar}
@@ -213,15 +228,17 @@ const Header: FC = () => {
                 </Link>
               )}
             </div>
-            <UserProfile
-              setAccountData={setAccountData}
-              isLoggedIn={!!accountData}
-              isDarkTheme={isDarkTheme}
-              username={accountData?.username}
-              setOpenLoginModal={setOpenLogin}
-              userImage={accountData?.picture}
-              handleOpenSettings={handleOpenSettings}
-            />
+            {!isSmallScreen && (
+              <UserProfile
+                setAccountData={setAccountData}
+                isLoggedIn={!!accountData}
+                isDarkTheme={isDarkTheme}
+                username={accountData?.username}
+                setOpenLoginModal={setOpenLogin}
+                userImage={accountData?.picture}
+                handleOpenSettings={handleOpenSettings}
+              />
+            )}
           </div>
         </div>
         <div className={styles.closeButton} onClick={handleToggleSidebar} />

src/components/UserProfile/UserProfile.module.scss

@@ -105,3 +105,9 @@
     }
   }
 }
+
+@media (max-width: 1110px) {
+  .userContainer {
+    padding-right: 0;
+  }
+}

src/components/UserProfile/UserProfile.tsx

@@ -14,6 +14,8 @@ type UserProfileProps = {
   userImage?: string;
   isLoggedIn?: boolean;
   isDarkTheme?: boolean;
+  hideDropdown?: boolean;
+  hideUsername?: boolean;
   setAccountData?: (updater: (prev: boolean) => boolean) => void;
   setOpenLoginModal?: (openModal: boolean) => void;
   handleOpenSettings?: () => void;
@@ -30,6 +32,8 @@ const UserProfile: FC<UserProfileProps> = ({
   userImage,
   isLoggedIn,
   isDarkTheme,
+  hideDropdown,
+  hideUsername,
   setAccountData,
   setOpenLoginModal,
   handleOpenSettings,
@@ -58,6 +62,10 @@ const UserProfile: FC<UserProfileProps> = ({
     handleOpenSettings?.();
   }, [handleOpenSettings]);
 
+  useEffect(() => {
+    if (hideDropdown) setIsDropdownOpen(false);
+  }, [hideDropdown]);
+
   useEffect(() => {
     if (!isDropdownOpen) return;
     const handleClickOutside = () => setIsDropdownOpen(false);
@@ -110,7 +118,9 @@ const UserProfile: FC<UserProfileProps> = ({
               height={32}
               className={styles.image}
             />
-            <span className={styles.userName}>{renderUserName()}</span>
+            {!hideUsername && (
+              <span className={styles.userName}>{renderUserName()}</span>
+            )}
           </div>
         ) : (
           <div className={styles.user} onClick={() => setOpenLoginModal(true)}>
@@ -121,7 +131,7 @@ const UserProfile: FC<UserProfileProps> = ({
               height={32}
               className={styles.image}
             />
-            <span className={styles.userName}>Log In</span>
+            {!hideUsername && <span className={styles.userName}>Log In</span>}
           </div>
         )}
         {isDropdownOpen && isAccessTokenExist && (

src/components/vibesuite/SkillDetailPanel/SkillDetailPanel.module.scss

@@ -37,6 +37,7 @@
   border: 1px solid var(--border);
   width: 644px;
   max-width: 100%;
+  min-height: 650px;
   max-height: 85vh;
   display: flex;
   flex-direction: column;
@@ -46,6 +47,7 @@
 
   @media (max-width: 1023px) {
     width: 100%;
+    min-height: unset;
     max-height: 100%;
     border: none;
   }

src/constants/tools.ts

@@ -74,7 +74,7 @@ export const TOOL_CONFIG: Record<number, ToolConfig> = {
     hoverColor: '#A4B465',
     darkHoverColor: '#D3DEAC',
     darkIconFill: '#D3DEAC',
-    isBlank: true,
+    isBlank: false,
   },
   9: {
     Icon: FriendlyTomIcon,

src/pages/tools/vibesuite/index.tsx

@@ -26,6 +26,7 @@ const VibeSuitePage: FC<VibeSuitePageProps> = ({ vibesuite }) => {
   }, []);
 
   const seoContent = vibesuite?.pageSeo;
+
   return (
     <>
       <SeoGenerator