fix(web): fix ui bugs

Author: weibohan07

apps/web/app/page.tsx

@@ -10,13 +10,13 @@ export default async function Page() {
   const initialPage = await getFeedPage({ limit: INITIAL_FEED_LIMIT });
 
   return (
-    <div className="flex flex-1 flex-col gap-8 px-6 pt-8 pb-12">
+    <div className="flex flex-1 flex-col gap-8 px-4 pt-8 pb-12 sm:px-6">
       <div className="flex flex-col gap-2">
         <div className="flex flex-wrap items-end justify-between gap-4">
           <div>
             <h1 className="text-3xl font-semibold tracking-tight">社区精选</h1>
             <p className="mt-1 text-sm text-muted-foreground">
-              实时汇总讨论区文章、帖子、云剪贴与社区裁决。
+              实时汇总高热度的文章、帖子、云剪贴板与陶片。
             </p>
           </div>
         </div>

apps/web/components/comments/comment-board.tsx

@@ -751,7 +751,7 @@ export function CommentBoard(props: CommentBoardProps) {
       type="button"
       variant="ghost"
       size="sm"
-      className="gap-1.5 rounded-xl"
+      className="hidden gap-1.5 rounded-xl"
       onClick={searchAction.onClick}
     >
       <Search className="size-4" aria-hidden="true" />

apps/web/components/feed/feed-card-template.tsx

@@ -79,12 +79,6 @@ export default function FeedCardTemplate({
             >
               {TYPE_META[kind].label}
             </span>
-            <time
-              className="text-xs text-muted-foreground"
-              dateTime={time.toISOString()}
-            >
-              {formatRelativeTime(time)}
-            </time>
           </header>
           <div className="mt-4 space-y-3">
             {metaTags?.length || metaText ? (
@@ -130,7 +124,7 @@ export default function FeedCardTemplate({
               </div>
             ) : null}
             {metrics?.length ? (
-              <div className="flex flex-wrap items-center gap-2.5">
+              <div className="flex flex-wrap items-center gap-x-2.5 gap-y-2">
                 {metrics.map((metric, index) => (
                   <MetaItem key={index} compact {...metric} />
                 ))}
@@ -143,6 +137,12 @@ export default function FeedCardTemplate({
             ) : (
               <span className="text-foreground">匿名用户</span>
             )}
+            <time
+              className="text-xs text-muted-foreground"
+              dateTime={time.toISOString()}
+            >
+              {formatRelativeTime(time)}
+            </time>
           </footer>
         </div>
       </div>

apps/web/components/feed/feed-item.tsx

@@ -32,7 +32,7 @@ export function FeedCard({ item }: { item: FeedEntry }) {
             { icon: MessageCircle, children: `${item.replyCount}\u2009评论` },
             {
               icon: CalendarClock,
-              children: `近期\u2009${item.recentReplyCount}\u2009评论`,
+              children: `最近\u2009${item.recentReplyCount}\u2009评论`,
             },
             { icon: Star, children: `${item.favorCount}\u2009收藏` },
             { icon: ThumbsUp, children: `${item.upvote}\u2009赞同` },
@@ -55,7 +55,7 @@ export function FeedCard({ item }: { item: FeedEntry }) {
             { icon: MessageSquare, children: `${item.replyCount}\u2009回复` },
             {
               icon: CalendarClock,
-              children: `近期\u2009${item.recentReplyCount}\u2009回复`,
+              children: `最近\u2009${item.recentReplyCount}\u2009回复`,
             },
           ]}
           user={item.author}

apps/web/components/layout/app-shell.tsx

@@ -25,7 +25,12 @@ import {
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent } from "@/components/ui/sheet";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
 import {
   BreadcrumbProvider,
   useBreadcrumbContext,
@@ -173,6 +178,9 @@ function MobileSidebar({
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent side="left" className="w-72 border-r p-0">
+        <SheetHeader className="sr-only">
+          <SheetTitle>导航菜单</SheetTitle>
+        </SheetHeader>
         <div className="flex h-full flex-col overflow-y-auto px-4 py-6">
           <SidebarBrand variant="mobile" />
           <nav className="mt-6 space-y-1.5">
@@ -256,7 +264,7 @@ function TopBar({
 
   return (
     <header className="sticky top-0 z-30 border-b bg-background/80 backdrop-blur">
-      <div className="flex h-16 items-center gap-3 px-4">
+      <div className="flex h-16 items-center gap-3 px-4 sm:px-6">
         {isMobile && (
           <Button
             variant="ghost"