From 4b4b071e4122efa6f33c4d9480b5741b6c53cb71 Mon Sep 17 00:00:00 2001
From: Prathameshdhande22 <prathameshdhande534@gmail.com>
Date: Fri, 9 Feb 2024 11:13:54 +0530
Subject: [PATCH] Fix : Made Responsive for the blog view, blog new and blog
 edit editor.

---
 frontend/src/Pages/Edit/index.jsx          |  2 +-
 frontend/src/Pages/NewBlog/index.jsx       |  4 +-
 frontend/src/components/BlogView/index.jsx | 80 +++++++++++-----------
 3 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/frontend/src/Pages/Edit/index.jsx b/frontend/src/Pages/Edit/index.jsx
index c4ce0e9..ed93c65 100644
--- a/frontend/src/Pages/Edit/index.jsx
+++ b/frontend/src/Pages/Edit/index.jsx
@@ -182,7 +182,7 @@ export const Edit = () => {
                 value={data?.title}
                 inputProps={{ className: "font-gara text-2xl" }}
               />
-              <div data-color-mode="light">
+              <div data-color-mode="light" className="w-full">
                 <MarkdownEditor
                   value={data?.content}
                   height="500px"
diff --git a/frontend/src/Pages/NewBlog/index.jsx b/frontend/src/Pages/NewBlog/index.jsx
index dd7d73a..971f4e8 100644
--- a/frontend/src/Pages/NewBlog/index.jsx
+++ b/frontend/src/Pages/NewBlog/index.jsx
@@ -77,7 +77,7 @@ export const NewBlog = () => {
   return (
     <div className="flex flex-col justify-center items-center w-full my-4">
       <div className="flex flex-col flex-wrap gap-6 w-[95%] md:w-[50%]">
-        <div className="flex flex-row justify-between items-center">
+        <div className="flex flex-row w-full justify-between items-center">
           <div className="font-gara text-2xl md:text-4xl font-bold border-b-4 py-1 border-b-indigo-600 pe-6 select-none">
             Create New Blog
           </div>
@@ -131,7 +131,7 @@ export const NewBlog = () => {
           required
           inputProps={{ className: "font-gara text-2xl" }}
         />
-        <div data-color-mode="light">
+        <div data-color-mode="light" className="w-full">
           <MarkdownEditor
             value={data?.content}
             height="500px"
diff --git a/frontend/src/components/BlogView/index.jsx b/frontend/src/components/BlogView/index.jsx
index ca5f453..ded9a7d 100644
--- a/frontend/src/components/BlogView/index.jsx
+++ b/frontend/src/components/BlogView/index.jsx
@@ -38,47 +38,49 @@ export const BlogView = ({ blogdata }) => {
   }, [blogdata]);
 
   return (
-    <div className="flex my-5 flex-row w-full justify-center items-center">
-      <div className="flex mx-4 flex-col justify-center gap-5 w-full items-center sm:w-[60%]">
-        {imgsrc !== null ? (
-          <div className="md:w-3/4">
-            <img src={imgsrc} alt="Thumbnail" />
+    <div className="flex my-5 flex-row justify-center items-center">
+      <div className="flex flex-col justify-center gap-5 items-center w-full lg:w-1/2">
+        <div className="flex flex-col justify-center items-center gap-3 w-full px-5">
+          {imgsrc !== null ? (
+            <div className="md:w-2/4 w-72">
+              <img src={imgsrc} alt="Thumbnail" />
+            </div>
+          ) : null}
+          <div className="font-mono font-extrabold text-2xl sm:text-4xl self-start tracking-wide">
+            {blogdata?.title}
           </div>
-        ) : null}
-        <div className="font-mono font-extrabold text-2xl sm:text-4xl self-start tracking-wide">
-          {blogdata?.title}
-        </div>
-        <div className="self-start font-mono italic">
-          {readingTime(String(blogdata?.content), 50).text}
-        </div>
-        <div className="self-start flex flex-col gap-1 ">
-          <Link
-            to={`/author/${blogdata?.authorid}`}
-            className="font-noto font-bold text-sm hover:border-b-2 border-indigo-700"
-          >
-            {blogdata?.name}
-          </Link>
-          <span className="font-raj select-none font-semibold italic text-sm">
-            {moment(blogdata?.createdon).fromNow().toString()}
-          </span>
-        </div>
-        <div
-          className="font-noto self-start leading-relaxed tracking-wide"
-          data-color-mode="light"
-        >
-          <MarkdownPreview
-            source={blogdata?.content}
-            rehypePlugins={[rehypeRaw, rehypeAutolinkHeadings]}
-            remarkPlugins={[remarkGfm, remarkImages]}
-            skipHtml
-          />
-        </div>
-        <div className="self-start">
-          <span className="px-3 inline-block py-1 bg-neutral-100 rounded-2xl border-2 border-gray-400 font-meri text-xs">
-            <Link to={`/tags/${blogdata?.tag}`}>
-              <span>{blogdata?.tag}</span>
+          <div className="self-start font-mono italic">
+            {readingTime(String(blogdata?.content), 50).text}
+          </div>
+          <div className="self-start flex flex-col gap-1 ">
+            <Link
+              to={`/author/${blogdata?.authorid}`}
+              className="font-noto font-bold text-sm hover:border-b-2 border-indigo-700"
+            >
+              {blogdata?.name}
             </Link>
-          </span>
+            <span className="font-raj select-none font-semibold italic text-sm">
+              {moment(blogdata?.createdon).fromNow().toString()}
+            </span>
+          </div>
+          <div
+            className="w-full"
+            data-color-mode="light"
+          >
+            <MarkdownPreview
+              source={blogdata?.content}
+              rehypePlugins={[rehypeRaw, rehypeAutolinkHeadings]}
+              remarkPlugins={[remarkGfm, remarkImages]}
+              skipHtml
+            />
+          </div>
+          <div className="self-start">
+            <span className="px-3 inline-block py-1 bg-neutral-100 rounded-2xl border-2 border-gray-400 font-meri text-xs">
+              <Link to={`/tags/${blogdata?.tag}`}>
+                <span>{blogdata?.tag}</span>
+              </Link>
+            </span>
+          </div>
         </div>
         <div className="space-y-2 font-meri text-sm">
           <span>Share on </span>