search page ui fixes

components/site-bottom-nav.tsx

@@ -92,9 +92,9 @@ export function SiteBottomNav() {
                 aria-label={item.label}
                 aria-current={active ? "page" : undefined}
                 className={cn(
-                  "h-14 flex flex-col items-center justify-center gap-0.5",
+                  "w-14 h-14 rounded-md flex flex-col items-center justify-center",
                   active
-                    ? "text-primary"
+                    ? "text-white bg-primary"
                     : "text-muted-foreground hover:text-foreground",
                 )}
               >

components/social/post-scroll-card.tsx

@@ -29,13 +29,14 @@
 import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { ImageIcon, Trash2 } from "lucide-react";
+import { ImageIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { Post, PostImage } from "@/lib/social";
 import { displaySourceLabel } from "@/lib/source-reference";
 import { useMediaQuery } from "@/components/selection-toolbar/shared";
 import { postSourceHref, quoteCardBgStyle } from "./post-card-shared";
 import { PostActionsFooter } from "./post-actions-footer";
+import { PostCardMenu } from "./post-card-menu";
 import { UpdateBackgroundModal } from "./update-background-modal";
 
 export function PostScrollCard({
@@ -54,38 +55,35 @@ export function PostScrollCard({
   const [bgModal, setBgModal] = useState(false);
   const [expanded, setExpanded] = useState(false);
 
-  const ownerCluster =
-    onUpdated || onDelete ? (
-      <div className="absolute top-3 right-3 z-10 flex items-center gap-1.5">
-        {onUpdated ? (
-          <OwnerButton
-            label="Update background"
-            onClick={() => setBgModal(true)}
-            icon={<ImageIcon className="size-4" />}
-          />
-        ) : null}
-        {onDelete ? (
-          <OwnerButton
-            label="Remove"
-            onClick={() => onDelete(post.id)}
-            icon={<Trash2 className="size-4" />}
-          />
-        ) : null}
-      </div>
-    ) : null;
+  // Update Background stays as a media-overlay button — it's context-
+  // specific to the visible card surface and reads more naturally
+  // positioned over the image itself. Delete has moved into the
+  // header's three-dot menu (PostCardMenu) where Block / Report also
+  // live, so the overlay is now Update-Background-only.
+  const ownerCluster = onUpdated ? (
+    <div className="absolute top-3 right-3 z-10">
+      <OwnerButton
+        label="Update background"
+        onClick={() => setBgModal(true)}
+        icon={<ImageIcon className="size-4" />}
+      />
+    </div>
+  ) : null;
 
   return (
     <article
       id={`post-${post.id}`}
       className="rounded-2xl overflow-hidden bg-card ring-1 ring-foreground/10 scroll-mt-20 sm:scroll-mt-24"
     >
-      {/* Author header */}
+      {/* Author header — identity on the left, three-dot overflow menu
+          on the right (Delete for author, Block/Report for everyone
+          else; PostCardMenu hides itself when there are no items). */}
       <header className="flex items-center gap-3 px-4 py-3">
         <AuthorAvatar
           src={post.author_avatar_url ?? null}
           name={post.author_name ?? "Unknown"}
         />
-        <div className="min-w-0">
+        <div className="min-w-0 flex-1">
           <Link
             href={
               post.author_handle ? `/u/${post.author_handle}` : "#"
@@ -100,6 +98,7 @@ export function PostScrollCard({
             </span>
           ) : null}
         </div>
+        <PostCardMenu post={post} onDelete={onDelete} />
       </header>
 
       {/* Media — image carousel or gradient-with-quote */}