feat: align figma browse and category sections

src/pages/Browse/index.tsx

@@ -1,5 +1,6 @@
 import { useSearchParams } from "react-router-dom";
 import { MessageStream } from "../../components/messageStream/MessageStream";
+import { SectionHeader } from "../../components/SectionHeader";
 import { useI18n } from "../../i18n";
 
 export function Browse() {
@@ -7,10 +8,14 @@ export function Browse() {
   const [sp] = useSearchParams();
   const q = sp.get("q") || "";
   return (
-    <section className="space-y-3">
-      <h1 className="mx-auto max-w-full px-4 text-2xl font-bold md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
-        {q ? `${t("search")}: ${q}` : t("all")}
-      </h1>
+    <section>
+      <div className="mx-auto max-w-full px-4 md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
+        <SectionHeader
+          title={q ? `${t("search")}: ${q}` : t("all")}
+          viewAllTo="/browse"
+          viewAllLabel={t("viewAll")}
+        />
+      </div>
       <MessageStream scope={{ kind: "all" }} />
     </section>
   );