Fix Top Header layout following changes in the Shadcn Sidebar;

Fix useMobile breakpoint to 1024px, to match our Tailwind convention for mobile breakpoints (lg)

apps/web/app/home/(user)/_components/home-menu-navigation.tsx

@@ -49,13 +49,19 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
       </div>
 
       <div className={'flex justify-end space-x-2.5'}>
+        <UserNotifications userId={user.id} />
+
         <If condition={featuresFlagConfig.enableTeamAccounts}>
           <HomeAccountSelector userId={user.id} accounts={accounts} />
         </If>
 
-        <UserNotifications userId={user.id} />
-
-        <ProfileAccountDropdownContainer user={user} account={workspace} />
+        <div>
+          <ProfileAccountDropdownContainer
+            user={user}
+            account={workspace}
+            showProfileName={false}
+          />
+        </div>
       </div>
     </div>
   );

apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx

@@ -48,7 +48,9 @@ export function TeamAccountNavigationMenu(props: {
         </BorderedNavigationMenu>
       </div>
 
-      <div className={'flex justify-end space-x-2.5'}>
+      <div className={'flex justify-end space-x-2.5 items-center'}>
+        <TeamAccountNotifications accountId={account.id} userId={user.id} />
+
         <TeamAccountAccountsSelector
           userId={user.id}
           selectedAccount={account.slug}
@@ -59,9 +61,9 @@ export function TeamAccountNavigationMenu(props: {
           }))}
         />
 
-        <TeamAccountNotifications accountId={account.id} userId={user.id} />
-
-        <ProfileAccountDropdownContainer user={user} account={account} />
+        <div>
+          <ProfileAccountDropdownContainer user={user} account={account} showProfileName={false} />
+        </div>
       </div>
     </div>
   );

apps/web/components/personal-account-dropdown-container.tsx

@@ -19,6 +19,7 @@ const features = {
 
 export function ProfileAccountDropdownContainer(props: {
   user?: User;
+  showProfileName?: boolean;
 
   account?: {
     id: string | null;
@@ -42,6 +43,7 @@ export function ProfileAccountDropdownContainer(props: {
       user={userData}
       account={props.account}
       signOutRequested={() => signOut.mutateAsync()}
+      showProfileName={props.showProfileName}
     />
   );
 }