fix: distorted images in wysiwyg articles (#2362)

# Description

Fix the distorted images when has a style property of `float`. Also,
made sure to add the inline styling only in the client side not in the
server to avoid hydration issues.

Fixes #2358 

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)

# How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce.

- [x] Manual Test

# Screenshots / Screen recording

Please add screenshots or recording if applicable
**ISSUES:** 

![image](https://github.com/zesty-io/website/assets/70579069/fa69e139-8af8-47d6-81ac-dc6320279480)

![image](https://github.com/zesty-io/website/assets/70579069/511598da-07e3-4355-85ea-753cf586d1b0)

**FIX:**

![image](https://github.com/zesty-io/website/assets/70579069/1233ff5b-4db3-4006-a295-59f540513f01)

![image](https://github.com/zesty-io/website/assets/70579069/3ec30c78-5fa5-40fa-9604-a3a88ce528a4)

---------

Co-authored-by: root <root@PHLTZTIO002.gbs.local>
Co-authored-by: darwin.apolinario <darwin.apolinario@gmail.com>

package.json

@@ -2,7 +2,7 @@
   "name": "zesty-website",
   "author": "Zesty.io Platform Inc.",
   "email": "marketing@zesty.io",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "private": true,
   "scripts": {
     "dev": "NODE_OPTIONS='--inspect' next dev",

src/views/zesty/Article.js

@@ -55,6 +55,7 @@ import { getCookie, hasCookie, setCookie } from 'cookies-next';
 
 function Article({ content }) {
   const [newContent, setNewContent] = useState(content.article);
+  const [isClient, setIsClient] = useState(false);
   const [relatedArticles, setRelatedArticles] = useState([]);
   const { palette } = useTheme();
 
@@ -120,7 +121,7 @@ function Article({ content }) {
     setRelatedArticles(
       getRelatedArticles(content?.related_articles, latestArticles),
     );
-    console.log(content);
+    setIsClient(true); // set inline styling in client not in server
   }, [latestArticles]);
 
   const verifyPathnameInCookie = (path) => {
@@ -206,6 +207,25 @@ function Article({ content }) {
     setShowPopup,
   };
 
+  const inlineStyles = isClient
+    ? `
+p img[style*="float:left"],  p img[style*="float: left"] {
+  margin-top: 0;
+  width: auto !important;
+}
+
+p img[style*="float:right"],  p img[style*="float: right"] {
+  margin-top: 0;
+  width: auto !important;
+}
+
+p img {
+  margin-top: 48px;
+  width: 100%;
+}
+}`
+    : ``;
+
   return (
     <Box sx={{ position: 'relative' }}>
       <ThemeProvider theme={() => revampTheme(palette.mode)}>
@@ -239,6 +259,7 @@ function Article({ content }) {
               },
             })}
           >
+            <style>{inlineStyles}</style>
             <MuiMarkdown
               options={{
                 overrides: {
@@ -464,12 +485,6 @@ function Article({ content }) {
                   },
                   img: {
                     component: 'img',
-                    props: {
-                      style: {
-                        marginTop: '48px',
-                        width: '100%',
-                      },
-                    },
                   },
                   iframe: {
                     component: ({ children, ...props }) => (