web/src/App.tsx

@@ -127,6 +127,15 @@ function Nav({
   );
 }
 
+function MobileTopBar({ category }: { category: Category }) {
+  const label = CATEGORIES.find((c) => c.id === category)?.label ?? "";
+  return (
+    <div class="bg-base-200 md:hidden px-4 pt-[calc(env(safe-area-inset-top)+0.5rem)] pb-2">
+      <span class="text-lg font-bold">{label}</span>
+    </div>
+  );
+}
+
 function Footer({
   category,
   setCategory,
@@ -175,7 +184,7 @@ function MainScreen({
 }) {
   return (
     <div
-      class={`flex-1 w-full mx-auto px-4 pb-24 md:pb-6 pt-[env(safe-area-inset-top)] ${
+      class={`flex-1 w-full mx-auto px-4 pb-24 md:pb-6 pt-2 md:pt-[env(safe-area-inset-top)] ${
         category === "services" ? "max-w-5xl" : "max-w-md"
       }`}
     >
@@ -261,6 +270,8 @@ export function App() {
         setOpenDoc={setOpenDoc}
       />
 
+      <MobileTopBar category={category} />
+
       <MainScreen
         category={category}
         setOpenDoc={setOpenDoc}