From 2cc631cddb264414ddf84310e92c99b64b5a5d15 Mon Sep 17 00:00:00 2001
From: vamsidhar-914 <vamsimay12345@gmail.com>
Date: Fri, 7 Jun 2024 11:33:38 +0530
Subject: [PATCH] fix-#392:  fixed alignment

---
 .../skeletons/related-post-card-skeleton.tsx  | 23 +++++++++++++++++++
 frontend/src/pages/details-page.tsx           |  4 ++--
 2 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/skeletons/related-post-card-skeleton.tsx

diff --git a/frontend/src/components/skeletons/related-post-card-skeleton.tsx b/frontend/src/components/skeletons/related-post-card-skeleton.tsx
new file mode 100644
index 00000000..54dc5f3c
--- /dev/null
+++ b/frontend/src/components/skeletons/related-post-card-skeleton.tsx
@@ -0,0 +1,23 @@
+import { Skeleton } from '../ui/skeleton';
+
+export function PostMobileViewCardSkeleton() {
+  return (
+    <div
+      className="flex h-fit rounded-lg border bg-slate-50 dark:border-none dark:bg-dark-card"
+      data-testid={'postMobileViewCardSkeleton'}
+    >
+      <div className="flex h-fit w-full gap-2 p-3">
+        <Skeleton className="w-1/3 overflow-hidden  rounded-lg bg-slate-200 dark:bg-slate-700" />
+        <div className="flex h-full w-2/3 flex-col gap-2 ">
+          <Skeleton className="mb-2 h-3 w-full bg-slate-200 pr-2 dark:bg-slate-700" />
+          <div className="mt-1 flex flex-wrap gap-1 sm:mt-2 sm:gap-1.5">
+            <Skeleton className={`h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700`} />
+            <Skeleton className={`h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700`} />
+          </div>
+          <Skeleton className="mb-2 h-6 w-full bg-slate-200 pr-2 dark:bg-slate-700 sm:mb-4" />
+          <Skeleton className="mb-2 h-3 w-full bg-slate-200 pr-2 dark:bg-slate-700" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/details-page.tsx b/frontend/src/pages/details-page.tsx
index a9531d6e..3936fc49 100644
--- a/frontend/src/pages/details-page.tsx
+++ b/frontend/src/pages/details-page.tsx
@@ -101,9 +101,9 @@ export default function DetailsPage() {
           </div>
         </div>
         <div className="container mx-auto flex flex-col space-y-2 px-4 py-6 dark:text-white">
-          <div className="flex flex-col text-2xl font-semibold sm:flex-col md:ml-4 md:flex-row  md:justify-between ">
+          <div className="flex justify-between text-2xl font-semibold ">
             <div>Related Blogs</div>
-            <div className="mr-10 flex cursor-pointer items-center text-sm text-gray-400 hover:underline">
+            <div className="flex cursor-pointer items-center text-sm text-gray-400 hover:underline sm:mr-10">
               <Link to="/">
                 <div>see more blogs</div>
               </Link>