fix(explore): make navigation and search sticky

The navigation and the search box will now always be at the top of the page when scrolling

Signed-off-by: Philip Molares <philip.molares@udo.edu>

frontend/src/app/(editor)/explore/layout.tsx

@@ -9,7 +9,6 @@ import type { PropsWithChildren } from 'react'
 import React, { Fragment, useEffect } from 'react'
 import { Container } from 'react-bootstrap'
 import { Welcome } from '../../../components/explore-page/welcome'
-import { ModeSelection } from '../../../components/explore-page/mode-selection/mode-selection'
 import { PinnedNotes } from '../../../components/explore-page/pinned-notes/pinned-notes'
 import { loadPinnedNotes } from '../../../redux/pinned-notes/methods'
 import { useUiNotifications } from '../../../components/notifications/ui-notification-boundary'
@@ -32,10 +31,7 @@ export default function ExploreLayout({ children }: ExploreLayoutProps) {
         <Welcome />
       </Container>
       <PinnedNotes />
-      <Container>
-        <ModeSelection />
-        {children}
-      </Container>
+      <Container>{children}</Container>
     </Fragment>
   )
 }

frontend/src/components/explore-page/explore-notes-section/explore-notes-section.module.css

@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: 2026 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.filter-and-nav-box {
+  position: sticky;
+  z-index: 1020;
+  top: 0;
+  padding-block-end: 0.25rem;
+  background-color: var(--bs-body-bg);
+}

frontend/src/components/explore-page/explore-notes-section/explore-notes-section.tsx

@@ -13,6 +13,8 @@ import { useUrlParamState } from '../../../hooks/common/use-url-param-state'
 import { SortButton } from './filters/sort-button'
 import { NotesList } from './notes-list/notes-list'
 import { SortMode } from '@hedgedoc/commons'
+import { ModeSelection } from '../mode-selection/mode-selection'
+import styles from './explore-notes-section.module.css'
 
 export interface ExploreNotesSectionProps {
   mode: Mode
@@ -44,11 +46,14 @@ export const ExploreNotesSection: React.FC<ExploreNotesSectionProps> = ({ mode }
 
   return (
     <Fragment>
-      <search className={'d-flex gap-2 mb-2'}>
-        <FilterByNoteType value={filterByType} onChange={setFilterByType} />
-        <FilterBySearchTerm value={searchFilter} onChange={setSearchFilter} />
-        <SortButton selected={sortMode} onChange={setSortMode} showLastVisitedOptions={mode === Mode.VISITED} />
-      </search>
+      <div className={styles['filter-and-nav-box']}>
+        <ModeSelection />
+        <search className={'d-flex gap-2 mb-2'}>
+          <FilterByNoteType value={filterByType} onChange={setFilterByType} />
+          <FilterBySearchTerm value={searchFilter} onChange={setSearchFilter} />
+          <SortButton selected={sortMode} onChange={setSortMode} showLastVisitedOptions={mode === Mode.VISITED} />
+        </search>
+      </div>
       <NotesList mode={mode} sort={sortMode} searchFilter={searchFilter} typeFilter={filterByType} />
     </Fragment>
   )