[questions][ui] sticky search bar in browse

apps/portal/src/pages/questions/browse.tsx

@@ -178,7 +178,7 @@ export default function QuestionsBrowsePage() {
       return undefined;
     }
     return questionsQueryData.pages.reduce(
-      (acc, page) => acc + page.data.length,
+      (acc, page) => acc + (page.data.length as number),
       0,
     );
   }, [questionsQueryData]);
@@ -444,8 +444,7 @@ export default function QuestionsBrowsePage() {
       <main className="flex flex-1 flex-col items-stretch">
         <div className="flex h-full flex-1">
           <section className="flex min-h-0 flex-1 flex-col items-center overflow-auto">
-            <div className="flex min-h-0 max-w-3xl flex-1 p-4">
-              <div className="flex flex-1 flex-col items-stretch justify-start gap-8">
+            <div className="m-4 flex max-w-3xl flex-1 flex-col items-stretch justify-start gap-8">
               <ContributeQuestionCard
                 onSubmit={(data) => {
                   createQuestion({
@@ -458,6 +457,7 @@ export default function QuestionsBrowsePage() {
                   });
                 }}
               />
+              <div className="sticky top-0 border-b border-slate-300 bg-slate-50 py-4">
                 <QuestionSearchBar
                   sortOrderOptions={SORT_ORDERS}
                   sortOrderValue={sortOrder}
@@ -469,6 +469,7 @@ export default function QuestionsBrowsePage() {
                   onSortOrderChange={setSortOrder}
                   onSortTypeChange={setSortType}
                 />
+              </div>
               <div className="flex flex-col gap-2 pb-4">
                 {(questionsQueryData?.pages ?? []).flatMap(
                   ({ data: questions }) =>
@@ -522,7 +523,6 @@ export default function QuestionsBrowsePage() {
                 )}
               </div>
             </div>
-            </div>
           </section>
           <aside className="hidden w-[300px] overflow-y-auto border-l bg-white py-4 lg:block">
             <h2 className="px-4 text-xl font-semibold">Filter by</h2>