fix(explore): condense mobile header to search + tabs

packages/shared/src/components/MainFeedLayout.tsx

@@ -699,12 +699,11 @@ export default function MainFeedLayout({
         tab={tab}
         setTab={onTabChange}
         showBreadcrumbs={false}
-        showDropdown={false}
         className={{
           container:
-            'sticky top-[7.5rem] z-header w-full border-b border-border-subtlest-tertiary bg-background-default',
+            'sticky top-[4.5rem] z-header w-full border-b border-border-subtlest-tertiary bg-background-default',
           tabBarHeader: 'no-scrollbar overflow-x-auto',
-          tabBarContainer: 'w-full',
+          tabBarContainer: 'min-w-0 flex-1',
         }}
       />
     );

packages/shared/src/components/layout/MainLayoutHeader.spec.tsx

@@ -13,9 +13,12 @@ import { useScrollTopClassName } from '../../hooks/useScrollTopClassName';
 import { useFeedName } from '../../hooks/feed/useFeedName';
 import useActiveNav from '../../hooks/useActiveNav';
 
-jest.mock('next/dynamic', () => () => {
+jest.mock('next/dynamic', () => (loader: () => Promise<unknown>) => {
+  const name = String(loader).includes('spotlightTrigger')
+    ? 'spotlight-trigger'
+    : 'dynamic-component';
   return function MockDynamicComponent() {
-    return <div data-testid="dynamic-component" />;
+    return <div data-testid={name} />;
   };
 });
 
@@ -52,12 +55,6 @@ jest.mock('../../hooks/feed/useFeedName', () => ({
 
 jest.mock('../../hooks/useActiveNav', () => jest.fn());
 
-jest.mock('../header/MobileExploreHeader', () => ({
-  MobileExploreHeader: ({ path }: { path: string }) => (
-    <div data-testid="mobile-explore-header">{path}</div>
-  ),
-}));
-
 const mockUseSettingsContext = useSettingsContext as jest.Mock;
 const mockUseActiveFeedNameContext = useActiveFeedNameContext as jest.Mock;
 const mockUseViewSize = useViewSize as jest.Mock;
@@ -115,9 +112,7 @@ describe('MainLayoutHeader', () => {
 
     expect(hydratedHeader).toBe(initialHeader);
     expect(hydratedHeader).toHaveClass('sticky', 'top-0');
-    expect(screen.getByTestId('mobile-explore-header')).toHaveTextContent(
-      'posts',
-    );
+    expect(screen.getByTestId('spotlight-trigger')).toBeInTheDocument();
     expect(recoverableErrors).toHaveLength(0);
 
     await act(async () => {

packages/shared/src/components/layout/MainLayoutHeader.tsx

@@ -14,7 +14,6 @@ import { useFeedName } from '../../hooks/feed/useFeedName';
 import { useCustomizeNewTab } from '../../features/customizeNewTab/CustomizeNewTabContext';
 import { SharedFeedPage } from '../utilities';
 import FeedNav from '../feeds/FeedNav';
-import { MobileExploreHeader } from '../header/MobileExploreHeader';
 import useActiveNav from '../../hooks/useActiveNav';
 
 export interface MainLayoutHeaderProps {
@@ -121,29 +120,24 @@ function MainLayoutHeader({
           : undefined,
       }}
     >
-      {isMobileSearchPage ? (
-        <>
-          {renderSearchPanel()}
-          {!isSearch && <MobileExploreHeader path={activeFeedName} />}
-        </>
-      ) : (
-        sidebarRendered !== undefined && (
-          <>
-            <div>
-              <HeaderLogo
-                position={
-                  isStreaksEnabled && isStreakLarge
-                    ? LogoPosition.Relative
-                    : LogoPosition.Absolute
-                }
-                onLogoClick={onLogoClick}
-              />
-            </div>
-            {renderSearchPanel()}
-            <HeaderButtons additionalButtons={additionalButtons} />
-          </>
-        )
-      )}
+      {isMobileSearchPage
+        ? renderSearchPanel()
+        : sidebarRendered !== undefined && (
+            <>
+              <div>
+                <HeaderLogo
+                  position={
+                    isStreaksEnabled && isStreakLarge
+                      ? LogoPosition.Relative
+                      : LogoPosition.Absolute
+                  }
+                  onLogoClick={onLogoClick}
+                />
+              </div>
+              {renderSearchPanel()}
+              <HeaderButtons additionalButtons={additionalButtons} />
+            </>
+          )}
     </header>
   );
 }

packages/shared/src/components/spotlight/SpotlightTrigger.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
-import { AiIcon, SearchIcon } from '../icons';
+import { AiIcon } from '../icons';
 import { IconSize } from '../Icon';
 import { isAppleDevice } from '../../lib/func';
 import { KeyboadShortcutLabel } from '../KeyboardShortcutLabel';
@@ -26,29 +26,12 @@ export const SpotlightTrigger = ({
   const { open } = useSpotlight();
   const isLaptop = useViewSize(ViewSize.Laptop);
 
-  if (!isLaptop) {
-    return (
-      <button
-        type="button"
-        data-testid="spotlight-trigger"
-        aria-label="Open search"
-        onClick={open}
-        className={classNames(
-          'flex size-10 items-center justify-center rounded-12 bg-background-subtle text-text-tertiary transition-colors hover:text-text-primary',
-          className,
-        )}
-      >
-        <SearchIcon size={IconSize.Small} aria-hidden />
-      </button>
-    );
-  }
-
   return (
     <button
       type="button"
       data-testid="spotlight-trigger"
       aria-label="Open search"
-      aria-keyshortcuts={`${shortcutKeys.join('+')}`}
+      aria-keyshortcuts={isLaptop ? shortcutKeys.join('+') : undefined}
       onClick={open}
       className={classNames(
         // Sizing, color, and shape match the production SearchPanel field.