fix: polish mobile menu titles

src/layouts/PublicLayout.tsx

@@ -65,6 +65,10 @@ function navClassName(active: boolean) {
   ].join(" ");
 }
 
+function mobileMenuNavClassName(active: boolean) {
+  return `${navClassName(active)} w-fit justify-self-start`;
+}
+
 const dropdownAnimationClass = "ark-header-popover-enter";
 const headerMenuAnimationClass = "ark-header-menu-enter";
 
@@ -633,7 +637,7 @@ export function PublicLayout() {
             </div>
             <Link
               to="/browse"
-              className={navClassName(na("browseAll"))}
+              className={mobileMenuNavClassName(na("browseAll"))}
               aria-current={na("browseAll") ? "page" : undefined}
               onClick={() => setOpen(false)}
             >
@@ -641,7 +645,7 @@ export function PublicLayout() {
             </Link>
             <Link
               to="/categories"
-              className={navClassName(na("categories"))}
+              className={mobileMenuNavClassName(na("categories"))}
               aria-current={na("categories") ? "page" : undefined}
               onClick={() => setOpen(false)}
             >
@@ -649,7 +653,7 @@ export function PublicLayout() {
             </Link>
             <Link
               to="/official-recommendations"
-              className={navClassName(na("browseRecommended"))}
+              className={mobileMenuNavClassName(na("browseRecommended"))}
               aria-current={na("browseRecommended") ? "page" : undefined}
               onClick={() => setOpen(false)}
             >
@@ -657,7 +661,7 @@ export function PublicLayout() {
             </Link>
             <Link
               to="/browse?sort=latest"
-              className={navClassName(na("browseLatest"))}
+              className={mobileMenuNavClassName(na("browseLatest"))}
               aria-current={na("browseLatest") ? "page" : undefined}
               onClick={() => setOpen(false)}
             >
@@ -665,7 +669,7 @@ export function PublicLayout() {
             </Link>
             <Link
               to={popularHref}
-              className={navClassName(na("browsePopular"))}
+              className={mobileMenuNavClassName(na("browsePopular"))}
               aria-current={na("browsePopular") ? "page" : undefined}
               onClick={() => setOpen(false)}
             >
@@ -673,7 +677,7 @@ export function PublicLayout() {
             </Link>
             <Link
               to="/favorites"
-              className={navClassName(na("favorites"))}
+              className={mobileMenuNavClassName(na("favorites"))}
               aria-current={na("favorites") ? "page" : undefined}
               onClick={() => setOpen(false)}
             >

src/pages/Categories/index.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { getJSON, itemsOrEmpty, readJSONCache, type Category } from "../../api";
 import { CategoryIcon } from "../../components/CategoryIcon";
+import { useSetPageTitle } from "../../components/PageTitleContext";
 import { SectionHeader } from "../../components/SectionHeader";
 import { Skeleton } from "../../components/Skeleton";
 import { langQuery, useI18n } from "../../i18n";
@@ -32,6 +33,7 @@ function figmaCategoryRank(category: Category): number {
 
 export function CategoriesPage() {
   const { t, lang } = useI18n();
+  useSetPageTitle(t("categories"));
   const [cats, setCats] = useState<Category[]>([]);
   const [err, setErr] = useState<string | null>(null);
 

src/pages/OfficialRecommendations/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { getJSON, itemsOrEmpty, readJSONCache, type Category } from "../../api";
+import { useSetPageTitle } from "../../components/PageTitleContext";
 import { RecommendedCard } from "../../components/RecommendedCard";
 import { SectionHeader } from "../../components/SectionHeader";
 import { langQuery, useI18n } from "../../i18n";
@@ -12,6 +13,7 @@ import {
 
 export function OfficialRecommendationsPage() {
   const { t, lang } = useI18n();
+  useSetPageTitle(t("official"));
   const [items, setItems] = useState<PostBackedResource[]>([]);
   const [err, setErr] = useState<string | null>(null);