fix-krishnaacharyaa#392: fixed alignment

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>
+  );
+}

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>