fix(profile): improve styling of profile page

src/views/Profile.tsx

@@ -63,11 +63,11 @@ function SectionTitle({
 }) {
   return (
     <div className="text-right">
-      <div className="flex items-center justify-end gap-2">
+      <div className="flex items-center gap-2">
-        <CardTitle>{title}</CardTitle>
         <div className="rounded-2xl border border-border/70 bg-muted/35 p-3">
           <Icon className="h-5 w-5 text-primary" />
         </div>
+        <CardTitle>{title}</CardTitle>
       </div>
       {description ? <CardDescription className="mt-2">{description}</CardDescription> : null}
     </div>
@@ -98,10 +98,10 @@ function TabButton<T extends string>({
           : "border-border/70 bg-background/70 text-muted-foreground hover:bg-muted/50 hover:text-foreground",
       ].join(" ")}
     >
+      <span className="font-medium">{label}</span>
       <span className="rounded-full bg-background/25 px-2 py-0.5 text-xs">
         {formatNumberPersian(count)}
       </span>
-      <span className="font-medium">{label}</span>
     </button>
   );
 }
@@ -553,7 +553,6 @@ export default function Profile() {
                   <SectionTitle
                     icon={UserRound}
                     title="اطلاعات شخصی و حساب"
-                    description="اطلاعات اصلی حساب بدون فیلدهای اضافی و با چینش مناسب فارسی."
                   />
                 </CardHeader>
                 <CardContent className="grid gap-6 md:grid-cols-2">
@@ -589,7 +588,6 @@ export default function Profile() {
                   <SectionTitle
                     icon={CalendarClock}
                     title="فعالیت‌های رویدادی"
-                    description="ثبت‌نام‌های شما با تفکیک وضعیت در نمای تب‌بندی‌شده."
                   />
                 </CardHeader>
                 <CardContent className="space-y-5">
@@ -624,20 +622,20 @@ export default function Profile() {
                   </div>
 
                   <div className="flex flex-col gap-4 lg:flex-row-reverse">
-                    <div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
-                      <TabButton value="confirmed" active={eventTab} label="تأیید شده" count={confirmedRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
-                      <TabButton value="pending" active={eventTab} label="در انتظار" count={pendingRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
-                      <TabButton value="cancelled" active={eventTab} label="لغو شده" count={canceledRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
-                    </div>
                     <div className="min-w-0 flex-1 space-y-3">
                       {regsLoading ? <p className="text-sm text-muted-foreground">در حال بارگذاری فعالیت‌های رویدادی...</p> : null}
                       {regsError ? <p className="text-sm text-destructive">خطا در دریافت ثبت‌نام‌های رویدادی</p> : null}
                       {activeEventItems.length ? activeEventItems.map(renderRegistrationRow) : (
-                        <div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground">
+                        <div className="rounded-2xl flex flex-col justify-center h-full border border-dashed p-8 text-center text-sm text-muted-foreground">
                           موردی در این بخش ثبت نشده است.
                         </div>
                       )}
                     </div>
+                    <div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
+                      <TabButton value="confirmed" active={eventTab} label="تأیید شده" count={confirmedRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
+                      <TabButton value="pending" active={eventTab} label="در انتظار" count={pendingRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
+                      <TabButton value="cancelled" active={eventTab} label="لغو شده" count={canceledRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
+                    </div>
                   </div>
                 </CardContent>
               </Card>
@@ -647,17 +645,10 @@ export default function Profile() {
                   <SectionTitle
                     icon={MessageSquareText}
                     title="فعالیت‌های بلاگ"
-                    description="لایک‌ها، ذخیره‌ها، نظرها و پاسخ‌های شما در نمای تب‌بندی‌شده."
                   />
                 </CardHeader>
                 <CardContent>
                   <div className="flex flex-col gap-4 lg:flex-row-reverse">
-                    <div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
-                      <TabButton value="liked" active={blogTab} label="پسندیده‌ها" count={blogCounts.liked} onClick={(value) => setBlogTab(value as BlogTab)} />
-                      <TabButton value="saved" active={blogTab} label="ذخیره‌شده‌ها" count={blogCounts.saved} onClick={(value) => setBlogTab(value as BlogTab)} />
-                      <TabButton value="comments" active={blogTab} label="نظرها" count={blogCounts.comments} onClick={(value) => setBlogTab(value as BlogTab)} />
-                      <TabButton value="replies" active={blogTab} label="پاسخ‌ها" count={blogCounts.replies} onClick={(value) => setBlogTab(value as BlogTab)} />
-                    </div>
                     <div className="min-w-0 flex-1 space-y-3">
                       {blogTab === "liked" ? (
                         blogActivity?.liked_posts.length ? blogActivity.liked_posts.map(renderPostRow) : (
@@ -680,6 +671,12 @@ export default function Profile() {
                         )
                       ) : null}
                     </div>
+                    <div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
+                      <TabButton value="liked" active={blogTab} label="پسندیده‌ها" count={blogCounts.liked} onClick={(value) => setBlogTab(value as BlogTab)} />
+                      <TabButton value="saved" active={blogTab} label="ذخیره‌شده‌ها" count={blogCounts.saved} onClick={(value) => setBlogTab(value as BlogTab)} />
+                      <TabButton value="comments" active={blogTab} label="نظرها" count={blogCounts.comments} onClick={(value) => setBlogTab(value as BlogTab)} />
+                      <TabButton value="replies" active={blogTab} label="پاسخ‌ها" count={blogCounts.replies} onClick={(value) => setBlogTab(value as BlogTab)} />
+                    </div>
                   </div>
                 </CardContent>
               </Card>
@@ -699,7 +696,7 @@ function EmptyBlogActivity({
   text: string;
 }) {
   return (
-    <div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground">
+    <div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground flex flex-col justify-center h-full">
       <Icon className="mx-auto mb-3 h-5 w-5 text-primary" />
       {text}
     </div>