reverted fix

src/components/Image/index.tsx

@@ -102,7 +102,7 @@ export default function Image({
   }
 
   return (
-    <span className={cn('relative overflow-hidden inline-block', classNames.wrapper)} {...props}>
+    <div className={cn('relative overflow-hidden', classNames.wrapper)} {...props}>
       {displaySkeleton && (
         <span className="absolute inset-0 z-10 inline-block">
           {blurHash ? (
@@ -141,17 +141,17 @@ export default function Image({
         />
       )}
       {hasError && (
-        <span
+        <div
           className={cn(
-            'object-cover flex flex-col items-center justify-center w-full h-full bg-muted inline-block',
+            'object-cover flex flex-col items-center justify-center w-full h-full bg-muted',
             className,
             classNames.errorPlaceholder
           )}
         >
           {errorPlaceholder}
-        </span>
+        </div>
       )}
-    </span>
+    </div>
   )
 }
 

src/components/ImageWithLightbox/index.tsx

@@ -57,7 +57,7 @@ export default function ImageWithLightbox({
   }
 
   return (
-    <span className="inline-block">
+    <div>
       <Image
         key={0}
         className={className}
@@ -92,6 +92,6 @@ export default function ImageWithLightbox({
           </div>,
           document.body
         )}
-    </span>
+    </div>
   )
 }

src/components/Note/LongFormArticle/index.tsx

@@ -4,7 +4,7 @@ import { getLongFormArticleMetadataFromEvent } from '@/lib/event-metadata'
 import { toNote, toNoteList, toProfile } from '@/lib/link'
 import { ExternalLink } from 'lucide-react'
 import { Event, kinds } from 'nostr-tools'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import NostrNode from './NostrNode'
@@ -61,7 +61,18 @@ export default function LongFormArticle({
             </a>
           )
         },
-        p: (props) => <p {...props} className="break-words" />,
+        p: (props) => {
+          // Check if the paragraph contains only an image
+          const children = props.children
+          if (React.Children.count(children) === 1 && React.isValidElement(children)) {
+            const child = children as React.ReactElement
+            if (child.type === ImageWithLightbox) {
+              // Render image outside paragraph context
+              return <div {...props} className="break-words" />
+            }
+          }
+          return <p {...props} className="break-words" />
+        },
         div: (props) => <div {...props} className="break-words" />,
         code: (props) => <code {...props} className="break-words whitespace-pre-wrap" />,
         img: (props) => (

src/components/ui/scroll-area.tsx

@@ -8,7 +8,7 @@ const ScrollArea = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & { scrollBarClassName?: string }
 >(({ className, scrollBarClassName, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root className={cn('relative overflow-hidden', className)} {...props}>
-    <ScrollAreaPrimitive.Viewport ref={ref} className="h-full w-full rounded-[inherit] *:!block">
+    <ScrollAreaPrimitive.Viewport ref={ref} className="h-full w-full rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar className={scrollBarClassName} />

src/layouts/SecondaryPageLayout/index.tsx

@@ -83,7 +83,7 @@ const SecondaryPageLayout = forwardRef(
     return (
       <DeepBrowsingProvider active={currentIndex === index} scrollAreaRef={scrollAreaRef}>
         <ScrollArea
-          className="h-full overflow-auto"
+          className="h-[calc(100vh-2rem)] overflow-auto"
           scrollBarClassName="z-50 pt-12"
           ref={scrollAreaRef}
         >