dimitar/placebo.mk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

img positioning fixed

Browse Source
This commit is contained in:
echo 2026-02-03 20:03:46 +01:00
parent 6467e21019
commit 3bc534489d
1 changed files with 18 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/routes/ArticleDetailComponent.tsx
View File

@ -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'
: data.imagePosition === 'right'
? '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'
? 'float-none md:float-left mr-0 md:mr-6'
: 'float-none md:float-right ml-0 md:ml-6'
}`}>
<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]}