img positioning fixed

frontend/src/components/routes/ArticleDetailComponent.tsx

@@ -68,31 +68,29 @@ export function ArticleDetailComponent({ id }: { id: string }) {
       </div>
 
       {data.featuredImage && data.imagePosition !== 'none' && (
-        <div className={`relative ${
+        <div className={`relative mb-4 ${
           data.imagePosition === 'top' 
-            ? 'w-full h-64 md:h-96 mb-8' 
+            ? 'w-full mb-8' 
             : data.imagePosition === 'left' 
-              ? 'float-none md:float-left mr-0 md:mr-6 mb-4 w-full md:w-auto' 
+              ? 'float-none md:float-left mr-0 md:mr-6' 
-              : data.imagePosition === 'right'
+              : 'float-none md:float-right ml-0 md:ml-6'
-                ? 'float-none md:float-right ml-0 md:ml-6 mb-4 w-full md:w-auto'
-                : ''
-        } ${
-          data.imagePosition === 'top'
-            ? data.imageSize === 'small' 
-              ? 'h-32' 
-              : data.imageSize === 'medium' 
-                ? 'h-48' 
-                : 'h-64'
-            : data.imageSize === 'small' 
-              ? 'w-full md:w-48 h-32' 
-              : data.imageSize === 'medium' 
-                ? 'w-full md:w-64 h-48' 
-                : 'w-full md:w-96 h-64'
         }`}>
           <img
             src={data.featuredImage}
             alt={data.title}
-            className="w-full h-full object-cover rounded-xl"
+            className={`rounded-xl object-cover ${
+              data.imagePosition === 'top'
+                ? data.imageSize === 'small' 
+                  ? 'h-32' 
+                  : data.imageSize === 'medium' 
+                    ? 'h-48' 
+                    : 'h-64 md:h-96'
+                : data.imageSize === 'small' 
+                  ? 'w-full md:w-48 h-32' 
+                  : data.imageSize === 'medium' 
+                    ? 'w-full md:w-64 h-48' 
+                    : 'w-full md:w-96 h-64'
+            }`}
             onError={(e) => {
               console.error('Failed to load image:', data.featuredImage, e);
               e.currentTarget.style.display = 'none';
@@ -112,7 +110,7 @@ export function ArticleDetailComponent({ id }: { id: string }) {
         </div>
       )}
 
-      <div className="prose prose-slate max-w-none clear-both md:clear-none">
+      <div className="prose prose-slate max-w-none">
         <div className="text-lg leading-relaxed mb-6">
           <ReactMarkdown 
             remarkPlugins={[remarkGfm]}