diff --git a/src/components/editor/markdown-renderer/markdown-renderer.tsx b/src/components/editor/markdown-renderer/markdown-renderer.tsx
index 9caf1acfe..d8e77892f 100644
--- a/src/components/editor/markdown-renderer/markdown-renderer.tsx
+++ b/src/components/editor/markdown-renderer/markdown-renderer.tsx
@@ -52,7 +52,7 @@ export interface MarkdownPreviewProps {
   wide?: boolean
 }
 
-const createMarkdownIt = ():MarkdownIt => {
+const createMarkdownIt = (): MarkdownIt => {
   const md = new MarkdownIt('default', {
     html: true,
     breaks: true,
diff --git a/src/components/editor/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx b/src/components/editor/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx
index 6ed82aa3a..ecb0117cb 100644
--- a/src/components/editor/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx
+++ b/src/components/editor/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx
@@ -17,8 +17,9 @@ export class PossibleWiderReplacer implements ComponentReplacer {
     if (!(childIsImage || childIsYoutube || childIsVimeo || childIsPDF)) {
       return
     }
-    return (<p className='wider-possible'>
-      {subNodeConverter(node, index)}
-    </p>)
+
+    // This appends the 'wider-possible' class to the node for a wider view in view-mode
+    node.attribs = Object.assign(node.attribs || {}, { class: `wider-possible ${node.attribs?.class || ''}` })
+    return subNodeConverter(node, index)
   }
 }