Index: client/src/Dashboard/components/UserPosts.jsx
===================================================================
--- client/src/Dashboard/components/UserPosts.jsx	(revision 4bd60e95a99d332aeb0fea14e106bd015d4656cc)
+++ client/src/Dashboard/components/UserPosts.jsx	(revision 6871dca1cc221d61d68bce68e3250dfe04dce9cd)
@@ -63,18 +63,18 @@
 
   return (
-    <div className="p-4 md:p-6 lg:p-8 bg-gradient-to-br from-base-100 to-base-200 min-h-screen min-w-[515px]">
+    <div className="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-base-100 to-base-200 min-h-screen">
       {/* Tab Navigation */}
-      <div className="flex justify-center mb-6 sm:mb-8 gap-2 ">
-        <div className="rounded-lg bg-base-300 p-1 flex gap-2">
+      <div className="flex justify-center mb-6 sm:mb-8 px-4">
+        <div className="rounded-lg bg-base-300 p-1 flex gap-2 w-full max-w-md sm:w-auto">
           <button
-            className={`tab tab-md sm:tab-lg rounded-lg ${
+            className={`tab tab-sm sm:tab-md lg:tab-lg rounded-lg flex-1 sm:flex-initial ${
               activeTab === "published"
                 ? "tab-active bg-[#FFB800] text-black hover:text-black"
-                : "hover:bg-base-200 "
+                : "hover:bg-base-200"
             }`}
             onClick={() => setActiveTab("published")}
           >
             <svg
-              className="w-4 h-4 mr-2 "
+              className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2"
               fill="none"
               stroke="currentColor"
@@ -88,16 +88,18 @@
               ></path>
             </svg>
-            <span>Published ({filteredApprovedPosts.length})</span>
+            <span className="text-xs sm:text-sm lg:text-base">
+              Published ({filteredApprovedPosts.length})
+            </span>
           </button>
           <button
-            className={`tab tab-md sm:tab-lg rounded-lg ${
+            className={`tab tab-sm sm:tab-md lg:tab-lg rounded-lg flex-1 sm:flex-initial ${
               activeTab === "pending"
                 ? "tab-active bg-[#FFB800] text-black hover:text-black"
-                : "hover:bg-base-200 "
+                : "hover:bg-base-200"
             }`}
             onClick={() => setActiveTab("pending")}
           >
             <svg
-              className="w-4 h-4 mr-2"
+              className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2"
               fill="none"
               stroke="currentColor"
@@ -111,10 +113,12 @@
               ></path>
             </svg>
-            <span>Pending ({pendingPosts.length})</span>
+            <span className="text-xs sm:text-sm lg:text-base">
+              Pending ({pendingPosts.length})
+            </span>
           </button>
         </div>
       </div>
-      <div className="mb-6 sm:mb-8 flex justify-center">
-        <div className="relative w-full max-w-lg">
+      <div className="mb-6 sm:mb-8 flex justify-center px-4">
+        <div className="relative w-full max-w-md sm:max-w-lg">
           {activeTab == "published" && (
             <>
@@ -122,10 +126,10 @@
                 type="text"
                 placeholder="Search your posts by title or content..."
-                className="input input-bordered w-full pl-10"
+                className="input input-bordered w-full pl-10 text-sm sm:text-base"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
               />
               <svg
-                className="w-5 h-5 absolute top-1/2 left-3 transform -translate-y-1/2 text-base-content/40 z-10"
+                className="w-4 h-4 sm:w-5 sm:h-5 absolute top-1/2 left-3 transform -translate-y-1/2 text-base-content/40 z-10"
                 fill="none"
                 stroke="currentColor"
@@ -145,10 +149,10 @@
 
       {/* Tab Content */}
-      <div className="animate-fadeIn">
+      <div className="animate-fadeIn px-4 sm:px-0">
         {activeTab === "published" && (
           <div>
-            <div className="flex items-center mb-6">
-              <div className="w-1 h-8 bg-success rounded-full mr-2 sm:mr-4"></div>
-              <h2 className="text-lg sm:text-xl font-semibold text-base-content">
+            <div className="flex items-center mb-4 sm:mb-6">
+              <div className="w-1 h-6 sm:h-8 bg-success rounded-full mr-2 sm:mr-4"></div>
+              <h2 className="text-base sm:text-lg lg:text-xl font-semibold text-base-content">
                 Your Published Posts
               </h2>
@@ -157,14 +161,14 @@
 
             {filteredApprovedPosts.length > 0 ? (
-              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+              <div className="grid gap-3 sm:gap-4 md:grid-cols-2 xl:grid-cols-3">
                 {filteredApprovedPosts.map((post) => (
                   <div
                     key={post.id}
-                    className="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300 border "
+                    className="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300 border h-full flex flex-col"
                   >
-                    <div className="card-body p-4 sm:p-6">
+                    <div className="card-body p-3 sm:p-4 lg:p-6 flex flex-col h-full">
                       <div className="flex">
                         <h3
-                          className="card-title text-base sm:text-lg mb-3 text-base-content line-clamp-2 hover:underline cursor-pointer "
+                          className="card-title text-sm sm:text-base lg:text-lg mb-2 sm:mb-3 text-base-content line-clamp-2 hover:underline cursor-pointer flex-grow"
                           onClick={() => {
                             navigate(`/dashboard/forum-detail/${post.id}`, {
@@ -176,12 +180,12 @@
                         </h3>
                       </div>
-                      <p className="mt-2 text-gray-400 text-sm sm:text-base  line-clamp-3 sm:line-clamp-none">
+                      <p className="mt-2 text-gray-400 text-xs sm:text-sm lg:text-base line-clamp-3 flex-grow">
                         {post.content && post.content.length > 150
                           ? post.content.slice(0, 150) + "..."
                           : post.content}
                       </p>
-                      <div className="flex items-center text-xs sm:text-sm text-base-content/60 mb-4">
+                      <div className="flex items-center text-xs sm:text-sm text-base-content/60 mb-3 sm:mb-4 mt-2">
                         <svg
-                          className="w-4 h-4 mr-2"
+                          className="w-3 h-3 sm:w-4 sm:h-4 mr-2"
                           fill="none"
                           stroke="currentColor"
@@ -207,10 +211,10 @@
                       <div className="card-actions justify-end mt-auto">
                         <div className="flex items-center space-x-2">
-                          <div className="flex items-center gap-2 text-sm sm:text-base  ">
+                          <div className="flex items-center gap-1 sm:gap-2 text-xs sm:text-sm lg:text-base">
                             {post.comment_count}
                             <img
                               src={commentIcon}
                               alt="Comment"
-                              className="w-2 h-2 sm:w-5 sm:h-5 lg:w-6 lg:h-6 hover:opacity-80"
+                              className="w-3 h-3 sm:w-4 sm:h-4 lg:w-5 lg:h-5 hover:opacity-80"
                             />
                           </div>
@@ -223,7 +227,7 @@
             ) : (
               <div className="text-center py-8 sm:py-12">
-                <div className="w-16 h-16 sm:w-20 sm:h-20 bg-base-300 rounded-full flex items-center justify-center mx-auto mb-4">
+                <div className="w-12 h-12 sm:w-16 sm:h-16 lg:w-20 lg:h-20 bg-base-300 rounded-full flex items-center justify-center mx-auto mb-4">
                   <svg
-                    className="w-8 h-8 sm:w-10 sm:h-10 text-base-content/40"
+                    className="w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 text-base-content/40"
                     fill="none"
                     stroke="currentColor"
@@ -238,5 +242,5 @@
                   </svg>
                 </div>
-                <p className="text-base sm:text-lg text-base-content/60">
+                <p className="text-sm sm:text-base lg:text-lg text-base-content/60">
                   No published posts found.
                 </p>
@@ -251,7 +255,7 @@
         {activeTab === "pending" && (
           <div>
-            <div className="flex items-center mb-6">
-              <div className="w-1 h-8 bg-warning rounded-full mr-2 sm:mr-4"></div>
-              <h2 className="text-lg sm:text-xl font-semibold text-base-content">
+            <div className="flex items-center mb-4 sm:mb-6">
+              <div className="w-1 h-6 sm:h-8 bg-warning rounded-full mr-2 sm:mr-4"></div>
+              <h2 className="text-base sm:text-lg lg:text-xl font-semibold text-base-content">
                 Awaiting Approval
               </h2>
@@ -260,23 +264,23 @@
 
             {pendingPosts.length > 0 ? (
-              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+              <div className="grid gap-3 sm:gap-4 md:grid-cols-2 xl:grid-cols-3">
                 {pendingPosts.map((post) => (
                   <div
                     key={post.id}
-                    className="card bg-base-100 shadow-lg  transition-all duration-300 border border-warning/20 relative overflow-hidden"
+                    className="card bg-base-100 shadow-lg transition-all duration-300 border border-warning/20 relative overflow-hidden h-full flex flex-col"
                   >
-                    <div className="absolute top-0 left-0 w-full h-1 "></div>
-
-                    <div className="card-body p-4 sm:p-6">
-                      <h3 className="card-title text-base sm:text-lg mb-3 text-base-content line-clamp-2">
+                    <div className="absolute top-0 left-0 w-full h-1"></div>
+
+                    <div className="card-body p-3 sm:p-4 lg:p-6 flex flex-col h-full">
+                      <h3 className="card-title text-sm sm:text-base lg:text-lg mb-2 sm:mb-3 text-base-content line-clamp-2">
                         {post.title}
                       </h3>
-                      <p className="text-sm text-base-content/70 mt-2 line-clamp-3">
+                      <p className="text-xs sm:text-sm text-base-content/70 mt-2 line-clamp-3 flex-grow">
                         {post.content}
                       </p>
 
-                      <div className="flex items-center text-xs sm:text-sm text-base-content/60 mb-4">
+                      <div className="flex items-center text-xs sm:text-sm text-base-content/60 mb-3 sm:mb-4 mt-2">
                         <svg
-                          className="w-4 h-4 mr-2"
+                          className="w-3 h-3 sm:w-4 sm:h-4 mr-2"
                           fill="none"
                           stroke="currentColor"
@@ -301,5 +305,5 @@
                         <div className="flex items-center space-x-2">
                           <div className="flex items-center text-xs text-warning">
-                            <div className="w-3 h-3 mr-1.5 bg-warning rounded-full animate-pulse"></div>
+                            <div className="w-2 h-2 sm:w-3 sm:h-3 mr-1.5 bg-warning rounded-full animate-pulse"></div>
                             Under Review
                           </div>
@@ -312,7 +316,7 @@
             ) : (
               <div className="text-center py-8 sm:py-12">
-                <div className="w-16 h-16 sm:w-20 sm:h-20 bg-success/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                <div className="w-12 h-12 sm:w-16 sm:h-16 lg:w-20 lg:h-20 bg-success/20 rounded-full flex items-center justify-center mx-auto mb-4">
                   <svg
-                    className="w-8 h-8 sm:w-10 sm:h-10 text-success"
+                    className="w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 text-success"
                     fill="none"
                     stroke="currentColor"
@@ -327,5 +331,5 @@
                   </svg>
                 </div>
-                <p className="text-base sm:text-lg text-base-content/60">
+                <p className="text-sm sm:text-base lg:text-lg text-base-content/60">
                   All clear! No posts waiting for review.
                 </p>