Move desktop filters to right side

2026-03-27 19:12:05 -04:00 · 2026-02-27 17:19:32 +01:00
parent d0176c2b65
commit 6c71022ed6
9 changed files with 260 additions and 233 deletions
--- a/web/components/comments/dropdown-menu.tsx
+++ b/web/components/comments/dropdown-menu.tsx
@@ -142,7 +142,7 @@ export function DropdownOptions(props: {
  }

  return (
-    <Col className={'w-[150px]'}>
+    <Col className={''}>
      {Object.entries(items).map(([key, item]) => (
        <div key={key}>
          <button
--- a/web/components/filters/mobile-filters.tsx
+++ b/web/components/filters/mobile-filters.tsx
@@ -35,6 +35,7 @@ import {Col} from 'web/components/layout/col'
 import {Row} from 'web/components/layout/row'
 import {NewBadge} from 'web/components/new-badge'
 import {ResetFiltersButton} from 'web/components/searches/button'
+import {useChoices} from 'web/hooks/use-choices'
 import {useT} from 'web/lib/locale'
 import {DietType, RelationshipType, RomanticType} from 'web/lib/util/convert-types'

@@ -48,7 +49,7 @@ import {MyMatchesToggle} from './my-matches-toggle'
 import {RelationshipFilter, RelationshipFilterText} from './relationship-filter'
 import {SmokerFilter, SmokerFilterText} from './smoker-filter'

-function MobileFilters(props: {
+function Filters(props: {
  filters: Partial<FilterFields>
  youProfile: Profile | undefined | null
  updateFilter: (newState: Partial<FilterFields>) => void
@@ -83,7 +84,7 @@ function MobileFilters(props: {
  const [noMinAge, noMaxAge] = getNoMinMaxAge(filters.pref_age_min, filters.pref_age_max)

  return (
-    <Col className="mb-[calc(20px+env(safe-area-inset-bottom))] mt-[calc(20px+env(safe-area-inset-top))]">
+    <Col className="mb-[calc(var(filter-offset)+env(safe-area-inset-bottom))] mt-[calc(var(filter-offset)+env(safe-area-inset-top))] pt-3">
      <FilterGuide className={'justify-between px-4 py-2'} />

      <Row className="justify-between px-4">
@@ -104,7 +105,7 @@ function MobileFilters(props: {
      </Col>

      {/* CONNECTION */}
-      <MobileFilterSection
+      <FilterSection
        title={t('profile.seeking', 'Seeking')}
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -120,10 +121,10 @@ function MobileFilters(props: {
        }
      >
        <RelationshipFilter filters={filters} updateFilter={updateFilter} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* Relationship Status */}
-      <MobileFilterSection
+      <FilterSection
        title={t('profile.optional.relationship_status', 'Relationship status')}
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -140,10 +141,10 @@ function MobileFilters(props: {
        }
      >
        <RelationshipStatusFilter filters={filters} updateFilter={updateFilter} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* LOCATION */}
-      <MobileFilterSection
+      <FilterSection
        title={t('profile.optional.location', 'Living')}
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -158,10 +159,10 @@ function MobileFilters(props: {
        }
      >
        <LocationFilter youProfile={youProfile} locationFilterProps={locationFilterProps} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* RAISED IN LOCATION */}
-      <MobileFilterSection
+      <FilterSection
        title={t('profile.optional.raised_in', 'Grew up')}
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -179,10 +180,10 @@ function MobileFilters(props: {
        }
      >
        <LocationFilter youProfile={youProfile} locationFilterProps={raisedInLocationFilterProps} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* AGE RANGE */}
-      <MobileFilterSection
+      <FilterSection
        title={t('profile.optional.age', 'Age')}
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -197,10 +198,10 @@ function MobileFilters(props: {
        }
      >
        <AgeFilter filters={filters} updateFilter={updateFilter} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* GENDER */}
-      <MobileFilterSection
+      <FilterSection
        title={t('profile.optional.gender', 'Gender')}
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -213,7 +214,7 @@ function MobileFilters(props: {
        }
      >
        <GenderFilter filters={filters} updateFilter={updateFilter} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* PREFERRED GENDER */}
      {/*<MobileFilterSection*/}
@@ -236,7 +237,7 @@ function MobileFilters(props: {
      {includeRelationshipFilters && (
        <>
          {/* ROMANTIC STYLE */}
-          <MobileFilterSection
+          <FilterSection
            title={t('profile.romantic.style', 'Style')}
            openFilter={openFilter}
            setOpenFilter={setOpenFilter}
@@ -254,10 +255,10 @@ function MobileFilters(props: {
            }
          >
            <RomanticFilter filters={filters} updateFilter={updateFilter} />
-          </MobileFilterSection>
+          </FilterSection>

          {/* WANTS KIDS */}
-          <MobileFilterSection
+          <FilterSection
            title={t('filter.wants_kids.wants_kids', 'Wants kids')}
            openFilter={openFilter}
            setOpenFilter={setOpenFilter}
@@ -276,10 +277,10 @@ function MobileFilters(props: {
            }
          >
            <WantsKidsFilter filters={filters} updateFilter={updateFilter} />
-          </MobileFilterSection>
+          </FilterSection>

          {/* HAS KIDS */}
-          <MobileFilterSection
+          <FilterSection
            title={t('profile.has_kids', 'Has kids')}
            openFilter={openFilter}
            setOpenFilter={setOpenFilter}
@@ -298,12 +299,12 @@ function MobileFilters(props: {
            }
          >
            <HasKidsFilter filters={filters} updateFilter={updateFilter} />
-          </MobileFilterSection>
+          </FilterSection>
        </>
      )}

      {/* DIET */}
-      <MobileFilterSection
+      <FilterSection
        title={t('profile.optional.diet', 'Diet')}
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -319,10 +320,10 @@ function MobileFilters(props: {
        }
      >
        <DietFilter filters={filters} updateFilter={updateFilter} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* DRINKS PER MONTH */}
-      <MobileFilterSection
+      <FilterSection
        title={t('profile.drinks', 'Drinks')}
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -343,10 +344,10 @@ function MobileFilters(props: {
        }
      >
        <DrinksFilter filters={filters} updateFilter={updateFilter} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* SMOKER */}
-      <MobileFilterSection
+      <FilterSection
        title={t('profile.smokes', 'Smoker')}
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -361,10 +362,10 @@ function MobileFilters(props: {
        }
      >
        <SmokerFilter filters={filters} updateFilter={updateFilter} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* LANGUAGES */}
-      <MobileFilterSection
+      <FilterSection
        title={t('profile.optional.languages', 'Languages')}
        // className="col-span-full max-h-80 overflow-y-auto"
        openFilter={openFilter}
@@ -381,10 +382,10 @@ function MobileFilters(props: {
        }
      >
        <LanguageFilter filters={filters} updateFilter={updateFilter} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* INTERESTS */}
-      <MobileFilterSection
+      <FilterSection
        newBadgeClassName={'-top-0 -left-0'}
        title={t('profile.optional.interests', 'Interests')}
        openFilter={openFilter}
@@ -407,10 +408,10 @@ function MobileFilters(props: {
          choices={choices.interests}
          label={'interests'}
        />
-      </MobileFilterSection>
+      </FilterSection>

      {/* CAUSES */}
-      <MobileFilterSection
+      <FilterSection
        newBadgeClassName={'-top-0 -left-0'}
        title={t('profile.optional.causes', 'Causes')}
        openFilter={openFilter}
@@ -433,10 +434,10 @@ function MobileFilters(props: {
          choices={choices.causes}
          label={'causes'}
        />
-      </MobileFilterSection>
+      </FilterSection>

      {/* WORK */}
-      <MobileFilterSection
+      <FilterSection
        newBadgeClassName={'-top-0 -left-0'}
        title={t('profile.optional.work', 'Work')}
        openFilter={openFilter}
@@ -459,10 +460,10 @@ function MobileFilters(props: {
          choices={choices.work}
          label={'work'}
        />
-      </MobileFilterSection>
+      </FilterSection>

      {/* POLITICS */}
-      <MobileFilterSection
+      <FilterSection
        title={t('profile.optional.political_beliefs', 'Politics')}
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -478,10 +479,10 @@ function MobileFilters(props: {
        }
      >
        <PoliticalFilter filters={filters} updateFilter={updateFilter} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* RELIGION */}
-      <MobileFilterSection
+      <FilterSection
        title={t('profile.optional.religious_beliefs', 'Religion')}
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -497,10 +498,10 @@ function MobileFilters(props: {
        }
      >
        <ReligionFilter filters={filters} updateFilter={updateFilter} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* MBTI */}
-      <MobileFilterSection
+      <FilterSection
        title="MBTI"
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -515,10 +516,10 @@ function MobileFilters(props: {
        }
      >
        <MbtiFilter filters={filters} updateFilter={updateFilter} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* BIG FIVE PERSONALITY */}
-      <MobileFilterSection
+      <FilterSection
        title={t('profile.big5', 'Personality (Big Five)')}
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -532,10 +533,10 @@ function MobileFilters(props: {
        }
      >
        <Big5Filters filters={filters} updateFilter={updateFilter} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* EDUCATION */}
-      <MobileFilterSection
+      <FilterSection
        title={t('profile.education.short_name', 'Education')}
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -551,10 +552,10 @@ function MobileFilters(props: {
        }
      >
        <EducationFilter filters={filters} updateFilter={updateFilter} />
-      </MobileFilterSection>
+      </FilterSection>

      {/* LAST ACTIVE */}
-      <MobileFilterSection
+      <FilterSection
        title={t('filter.last_active.title', 'Last active')}
        openFilter={openFilter}
        setOpenFilter={setOpenFilter}
@@ -567,14 +568,14 @@ function MobileFilters(props: {
        }
      >
        <LastActiveFilter filters={filters} updateFilter={updateFilter} />
-      </MobileFilterSection>
+      </FilterSection>
    </Col>
  )
 }

-export default MobileFilters
+export default Filters

-export function MobileFilterSection(props: {
+export function FilterSection(props: {
  title: string
  children: ReactNode
  openFilter: string | undefined
@@ -622,9 +623,52 @@ export function MobileFilterSection(props: {
          {isOpen ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
        </div>
      </button>
-      {isOpen && (
-        <div className={clsx('bg-canvas-50 px-4 py-2', childrenClassName)}>{children}</div>
-      )}
+      {isOpen && <div className={clsx('px-4 py-2', childrenClassName)}>{children}</div>}
    </Col>
  )
 }
+
+export function FiltersElement(props: {
+  filters: Partial<FilterFields>
+  youProfile: Profile | undefined | null
+  updateFilter: (newState: Partial<FilterFields>) => void
+  clearFilters: () => void
+  setYourFilters: (checked: boolean) => void
+  isYourFilters: boolean
+  locationFilterProps: LocationFilterProps
+  raisedInLocationFilterProps: LocationFilterProps
+}) {
+  const {
+    filters,
+    youProfile,
+    updateFilter,
+    clearFilters,
+    setYourFilters,
+    isYourFilters,
+    locationFilterProps,
+    raisedInLocationFilterProps,
+  } = props
+  const youSeekingRelationship = youProfile?.pref_relation_styles?.includes('relationship')
+  const {choices: interestChoices} = useChoices('interests')
+  const {choices: causeChoices} = useChoices('causes')
+  const {choices: workChoices} = useChoices('work')
+  const choices = {
+    interests: interestChoices,
+    causes: causeChoices,
+    work: workChoices,
+  }
+  return (
+    <Filters
+      filters={filters}
+      youProfile={youProfile}
+      updateFilter={updateFilter}
+      clearFilters={clearFilters}
+      setYourFilters={setYourFilters}
+      isYourFilters={isYourFilters}
+      locationFilterProps={locationFilterProps}
+      raisedInLocationFilterProps={raisedInLocationFilterProps}
+      includeRelationshipFilters={youSeekingRelationship}
+      choices={choices}
+    />
+  )
+}
--- a/web/components/filters/language-filter.tsx
+++ b/web/components/filters/language-filter.tsx
@@ -65,7 +65,7 @@ export function LanguageFilter(props: {
      onChange={(c) => {
        updateFilter({languages: c})
      }}
-      optionsClassName={'w-[200px] sm:w-[400px]'}
+      optionsClassName={''}
    />
  )
 }
--- a/web/components/filters/mbti-filter.tsx
+++ b/web/components/filters/mbti-filter.tsx
@@ -55,7 +55,7 @@ export function MbtiFilter(props: {

  return (
    <MultiCheckbox
-      optionsClassName={'grid grid-cols-2 xs:grid-cols-4'}
+      optionsClassName={'grid grid-cols-2'}
      selected={filters.mbti ?? []}
      choices={MBTI_CHOICES as any}
      translationPrefix={'profile.mbti'}
--- a/web/components/filters/search.tsx
+++ b/web/components/filters/search.tsx
@@ -21,9 +21,7 @@ import {useUser} from 'web/hooks/use-user'
 import {useT} from 'web/lib/locale'
 import {submitBookmarkedSearch} from 'web/lib/supabase/searches'

-import {DesktopFilters} from './desktop-filters'
 import {LocationFilterProps} from './location-filter'
-import MobileFilters from './mobile-filters'

 function isOrderBy(input: string): input is FilterFields['orderBy'] {
  return ['last_online_time', 'created_time', 'compatibility_score'].includes(input)
@@ -109,11 +107,7 @@ export const Search = forwardRef<
    // filter props
    filters: Partial<FilterFields>
    updateFilter: (newState: Partial<FilterFields>) => void
-    clearFilters: () => void
-    setYourFilters: (checked: boolean) => void
-    isYourFilters: boolean
    locationFilterProps: LocationFilterProps
-    raisedInLocationFilterProps: LocationFilterProps
    bookmarkedSearches: BookmarkedSearchesType[]
    refreshBookmarkedSearches: () => void
    profileCount: number | undefined
@@ -122,14 +116,12 @@ export const Search = forwardRef<
    highlightFilters?: boolean
    highlightSort?: boolean
    setOpenFiltersModal?: (open: boolean) => void
+    filtersElement: JSX.Element
  }
 >((props, ref) => {
  const {
    youProfile,
    updateFilter,
-    clearFilters,
-    setYourFilters,
-    isYourFilters,
    locationFilterProps,
    filters,
    bookmarkedSearches,
@@ -142,7 +134,7 @@ export const Search = forwardRef<
    setOpenFiltersModal: parentSetOpenFiltersModal,
    highlightFilters,
    highlightSort,
-    raisedInLocationFilterProps,
+    filtersElement,
  } = props

  const [internalOpenFiltersModal, setInternalOpenFiltersModal] = useState(false)
@@ -186,16 +178,8 @@ export const Search = forwardRef<
  const [openBookmarks, setOpenBookmarks] = useState(false)
  const [openStarBookmarks, setOpenStarBookmarks] = useState(false)
  const user = useUser()
-  const youSeekingRelationship = youProfile?.pref_relation_styles?.includes('relationship')
  const isClearedFilters = useIsClearedFilters(filters)
  const {choices: interestChoices} = useChoices('interests')
-  const {choices: causeChoices} = useChoices('causes')
-  const {choices: workChoices} = useChoices('work')
-  const choices = {
-    interests: interestChoices,
-    causes: causeChoices,
-    work: workChoices,
-  }

  useEffect(() => {
    if (isHolding) return
@@ -269,41 +253,12 @@ export const Search = forwardRef<
        </Row>
      </Row>
      <FilterGuide className={'hidden sm:inline'} />
-      <Row
-        className={
-          'border-ink-300 dark:border-ink-300 hidden flex-wrap items-center gap-4 pb-4 pt-1 sm:inline-flex'
-        }
-      >
-        <DesktopFilters
-          filters={filters}
-          youProfile={youProfile}
-          updateFilter={updateFilter}
-          clearFilters={clearFilters}
-          setYourFilters={setYourFilters}
-          isYourFilters={isYourFilters}
-          locationFilterProps={locationFilterProps}
-          raisedInLocationFilterProps={raisedInLocationFilterProps}
-          includeRelationshipFilters={youSeekingRelationship}
-          choices={choices}
-        />
-      </Row>
      <RightModal
        className="bg-canvas-0 w-2/3 text-sm sm:hidden h-full max-h-screen overflow-y-auto"
        open={openFiltersModal}
        setOpen={setOpenFiltersModal}
      >
-        <MobileFilters
-          filters={filters}
-          youProfile={youProfile}
-          updateFilter={updateFilter}
-          clearFilters={clearFilters}
-          setYourFilters={setYourFilters}
-          isYourFilters={isYourFilters}
-          locationFilterProps={locationFilterProps}
-          raisedInLocationFilterProps={raisedInLocationFilterProps}
-          includeRelationshipFilters={youSeekingRelationship}
-          choices={choices}
-        />
+        {filtersElement}
      </RightModal>
      <Row className="items-center justify-between w-full flex-wrap gap-2">
        <Row className={'mb-2 gap-2'}>
--- a/web/components/page-base.tsx
+++ b/web/components/page-base.tsx
@@ -61,6 +61,12 @@ export function PageBase(props: {
  useOnline()
  const [_, setIsAddFundsModalOpen] = useState(false)

+  const colSpan = className?.split(' ').find((c) => c.startsWith('col-span-')) ?? 'col-span-8'
+  const restClassName = className
+    ?.split(' ')
+    .filter((c) => !c.startsWith('col-span-'))
+    .join(' ')
+
  return (
    <>
      <GoogleOneTapLogin className="fixed bottom-12 right-4 z-[1000]" />
@@ -88,7 +94,7 @@ export function PageBase(props: {
            className="sticky top-0 hidden self-start px-2 lg:col-span-2 lg:flex sidebar-nav bg-canvas-25"
          />
        )}
-        <main className={clsx('flex flex-1 flex-col lg:mt-6 xl:px-2', 'col-span-8', className)}>
+        <main className={clsx('flex flex-1 flex-col lg:mt-6 xl:px-2', colSpan, restClassName)}>
          {children}
        </main>
      </Col>
--- a/web/components/profiles/profiles-home.tsx
+++ b/web/components/profiles/profiles-home.tsx
@@ -5,6 +5,7 @@ import {useRouter} from 'next/router'
 import {useCallback, useEffect, useRef, useState} from 'react'
 import toast from 'react-hot-toast'
 import {Button} from 'web/components/buttons/button'
+import {FiltersElement} from 'web/components/filters/filters'
 import {Search} from 'web/components/filters/search'
 import {useFilters} from 'web/components/filters/use-filters'
 import {Col} from 'web/components/layout/col'
@@ -184,147 +185,163 @@ export function ProfilesHome() {
    [refreshHiddenProfiles],
  )

+  const filtersElement = (
+    <FiltersElement
+      filters={filters}
+      youProfile={you}
+      updateFilter={updateFilter}
+      clearFilters={clearFilters}
+      setYourFilters={setYourFilters}
+      isYourFilters={isYourFilters}
+      locationFilterProps={locationFilterProps}
+      raisedInLocationFilterProps={raisedInLocationFilterProps}
+    />
+  )
+
  return (
-    <>
-      {showBanner && fromSignup && (
-        <div className="lg:col-span-12 w-full bg-canvas-100 rounded text-center py-3 px-3 relative">
-          <Col className="items-center justify-center gap-2">
-            <span className={'mb-2'}>
-              {t(
-                'profiles.search_intention',
-                'Compass works best when you search with intention. Try using keywords or filters instead of scrolling.',
-              )}
-            </span>
-            <Row className="gap-2 mb-2">
-              <Button
-                size="sm"
-                color="gray-white"
-                className={'border'}
-                onClick={() => {
-                  searchInputRef.current?.focus()
-                }}
-              >
-                {t('profiles.try_keyword_search', 'Try a keyword search')}
-              </Button>
-              {isMobile && (
+    <div className="lg:grid lg:grid-cols-12 lg:gap-4">
+      <Col className={'lg:col-span-9'}>
+        {showBanner && fromSignup && (
+          <div className="w-full bg-canvas-100 rounded text-center py-3 px-3 relative">
+            <Col className="items-center justify-center gap-2">
+              <span className={'mb-2'}>
+                {t(
+                  'profiles.search_intention',
+                  'Compass works best when you search with intention. Try using keywords or filters instead of scrolling.',
+                )}
+              </span>
+              <Row className="gap-2 mb-2">
+                <Button
+                  size="sm"
+                  color="gray-white"
+                  className={'border'}
+                  onClick={() => {
+                    searchInputRef.current?.focus()
+                  }}
+                >
+                  {t('profiles.try_keyword_search', 'Try a keyword search')}
+                </Button>
+                {isMobile && (
+                  <Button
+                    size="sm"
+                    color={'gray-white'}
+                    className={'border'}
+                    onClick={() => {
+                      if (!isMobile) return
+                      setHighlightFilters(true)
+                      setTimeout(() => {
+                        setHighlightFilters(false)
+                        setOpenFiltersModal(true)
+                      }, 500)
+                    }}
+                  >
+                    {t('profiles.show_filters', 'Show me the filters')}
+                  </Button>
+                )}
                <Button
                  size="sm"
                  color={'gray-white'}
                  className={'border'}
                  onClick={() => {
-                    if (!isMobile) return
-                    setHighlightFilters(true)
+                    setHighlightSort(true)
                    setTimeout(() => {
-                      setHighlightFilters(false)
-                      setOpenFiltersModal(true)
+                      setHighlightSort(false)
                    }, 500)
                  }}
                >
-                  {t('profiles.show_filters', 'Show me the filters')}
+                  {t('profiles.sort_differently', 'Sort differently')}
                </Button>
-              )}
-              <Button
-                size="sm"
-                color={'gray-white'}
-                className={'border'}
-                onClick={() => {
-                  setHighlightSort(true)
-                  setTimeout(() => {
-                    setHighlightSort(false)
-                  }, 500)
-                }}
-              >
-                {t('profiles.sort_differently', 'Sort differently')}
-              </Button>
-            </Row>
-            <Row className="gap-2 mb-6 sm:mb-2">
-              <p>
+              </Row>
+              <Row className="gap-2 mb-6 sm:mb-2">
+                <p>
+                  {t(
+                    'profiles.interactive_profiles',
+                    'Profiles are interactive — click any card to learn more and reach out.',
+                  )}
+                </p>
+              </Row>
+            </Col>
+            <Button
+              size="2xs"
+              color="gray-white"
+              onClick={() => setShowBanner(false)}
+              className="absolute bottom-1 right-1"
+            >
+              {t('profiles.dismiss', 'Dismiss')}
+            </Button>
+          </div>
+        )}
+        {showEarlyBanner && (
+          <div className="w-full bg-canvas-50 rounded-lg text-center py-3 px-3 relative">
+            <Col className="items-center justify-center gap-2">
+              <span className={'mb-2'}>
                {t(
-                  'profiles.interactive_profiles',
-                  'Profiles are interactive — click any card to learn more and reach out.',
+                  'profiles.early_growth',
+                  `Compass is in its early growth phase — 500+ members and ~100 new people joining every month. Build a strong profile now and be visible as the community expands.`,
+                )}
+              </span>
+            </Col>
+            <Button
+              size="2xs"
+              color="gray-white"
+              onClick={() => setShowEarlyBanner(false)}
+              className="absolute bottom-1 right-1"
+            >
+              {t('profiles.dismiss', 'Dismiss')}
+            </Button>
+          </div>
+        )}
+        {/*{user && !profile && <Button className="mb-4 lg:hidden" onClick={() => Router.push('signup')}>Create a profile</Button>}*/}
+        <Title className="!mb-2 text-3xl">{t('profiles.title', 'People')}</Title>
+        <Search
+          ref={searchInputRef}
+          openFilters={() => setOpenFiltersModal(true)}
+          openFiltersModal={openFiltersModal}
+          setOpenFiltersModal={setOpenFiltersModal}
+          highlightFilters={highlightFilters}
+          highlightSort={highlightSort}
+          youProfile={you}
+          starredUsers={starredUsers ?? []}
+          refreshStars={refreshStars}
+          filters={filters}
+          updateFilter={updateFilter}
+          locationFilterProps={locationFilterProps}
+          bookmarkedSearches={bookmarkedSearches}
+          refreshBookmarkedSearches={refreshBookmarkedSearches}
+          profileCount={profileCount}
+          filtersElement={filtersElement}
+        />
+        {displayProfiles === undefined || compatibleProfiles === undefined ? (
+          <CompassLoadingIndicator />
+        ) : (
+          <>
+            {fromSignup && isClearedFilters && (
+              <p className={'guidance'}>
+                {t(
+                  'profiles.seeing_all_profiles',
+                  'You are seeing all profiles. Use search or filters to narrow it down.',
                )}
              </p>
-            </Row>
-          </Col>
-          <Button
-            size="2xs"
-            color="gray-white"
-            onClick={() => setShowBanner(false)}
-            className="absolute bottom-1 right-1"
-          >
-            {t('profiles.dismiss', 'Dismiss')}
-          </Button>
-        </div>
-      )}
-      {showEarlyBanner && (
-        <div className="lg:col-span-12 w-full bg-canvas-50 rounded-lg text-center py-3 px-3 relative">
-          <Col className="items-center justify-center gap-2">
-            <span className={'mb-2'}>
-              {t(
-                'profiles.early_growth',
-                `Compass is in its early growth phase — 500+ members and ~100 new people joining every month. Build a strong profile now and be visible as the community expands.`,
-              )}
-            </span>
-          </Col>
-          <Button
-            size="2xs"
-            color="gray-white"
-            onClick={() => setShowEarlyBanner(false)}
-            className="absolute bottom-1 right-1"
-          >
-            {t('profiles.dismiss', 'Dismiss')}
-          </Button>
-        </div>
-      )}
-      {/*{user && !profile && <Button className="mb-4 lg:hidden" onClick={() => Router.push('signup')}>Create a profile</Button>}*/}
-      <Title className="!mb-2 text-3xl">{t('profiles.title', 'People')}</Title>
-      <Search
-        ref={searchInputRef}
-        openFilters={() => setOpenFiltersModal(true)}
-        openFiltersModal={openFiltersModal}
-        setOpenFiltersModal={setOpenFiltersModal}
-        highlightFilters={highlightFilters}
-        highlightSort={highlightSort}
-        youProfile={you}
-        starredUsers={starredUsers ?? []}
-        refreshStars={refreshStars}
-        filters={filters}
-        updateFilter={updateFilter}
-        clearFilters={clearFilters}
-        setYourFilters={setYourFilters}
-        isYourFilters={isYourFilters}
-        locationFilterProps={locationFilterProps}
-        raisedInLocationFilterProps={raisedInLocationFilterProps}
-        bookmarkedSearches={bookmarkedSearches}
-        refreshBookmarkedSearches={refreshBookmarkedSearches}
-        profileCount={profileCount}
-      />
-      {displayProfiles === undefined || compatibleProfiles === undefined ? (
-        <CompassLoadingIndicator />
-      ) : (
-        <>
-          {fromSignup && isClearedFilters && (
-            <p className={'guidance'}>
-              {t(
-                'profiles.seeing_all_profiles',
-                'You are seeing all profiles. Use search or filters to narrow it down.',
-              )}
-            </p>
-          )}
-          <ProfileGrid
-            profiles={displayProfiles}
-            loadMore={loadMore}
-            isLoadingMore={isLoadingMore}
-            isReloading={isReloading}
-            compatibilityScores={compatibleProfiles?.profileCompatibilityScores}
-            starredUserIds={starredUserIds}
-            refreshStars={refreshStars}
-            onHide={onHide}
-            hiddenUserIds={recentlyHiddenIds}
-            onUndoHidden={onUndoHidden}
-          />
-        </>
-      )}
-    </>
+            )}
+            <ProfileGrid
+              profiles={displayProfiles}
+              loadMore={loadMore}
+              isLoadingMore={isLoadingMore}
+              isReloading={isReloading}
+              compatibilityScores={compatibleProfiles?.profileCompatibilityScores}
+              starredUserIds={starredUserIds}
+              refreshStars={refreshStars}
+              onHide={onHide}
+              hiddenUserIds={recentlyHiddenIds}
+              onUndoHidden={onUndoHidden}
+            />
+          </>
+        )}
+      </Col>
+      {/* Desktop: filters sidebar on the right */}
+      <div className="hidden lg:block lg:col-span-3 lg:sticky lg:top-4 lg:h-fit text-sm bg-canvas-25 rounded-xl max-h-[calc(100vh-2rem)] overflow-y-auto">
+        {filtersElement}
+      </div>
+    </div>
  )
 }
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -20,9 +20,9 @@ export default function ProfilesPage() {
  console.debug('user:', user)

  return (
-    <PageBase trackPageView={'user profiles'}>
+    <PageBase trackPageView={'user profiles'} className={'col-span-10'}>
      <Col className="items-center">
-        <Col className={'w-full rounded px-3 py-4 sm:px-6'}>
+        <Col className={'w-full rounded px-3 sm:px-4'}>
          {user ? <ProfilesHome /> : <LoggedOutHome />}
        </Col>
      </Col>
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -8,9 +8,14 @@
  --bnh: env(safe-area-inset-bottom); /* native bottom nav height */
  --tnh: env(safe-area-inset-top); /* native top nav height */
  --hloss: calc(var(--bnh) + var(--tnh)); /* mobile height loss due to native top and bottom bars */
+  --filter-offset: 20px; /* padding for filters on mobile */
  touch-action: pan-y;
 }

+@media (width < 600px) {
+  --filter-offset: 0px;
+}
+
 .safe-top {
  /*padding-top: calc(20px);*/
  padding-top: env(safe-area-inset-top);