Skip to content

Fix: let utility classes override .prose image sizing - #5719

Merged
Yndira-E merged 1 commit into
mainfrom
fix/changelog-imgs
Aug 31, 2026
Merged

Fix: let utility classes override .prose image sizing#5719
Yndira-E merged 1 commit into
mainfrom
fix/changelog-imgs

Conversation

@Yndira-E

@Yndira-E Yndira-E commented Aug 31, 2026

Copy link
Copy Markdown
Contributor

Description

.prose img { width: 100%; height: auto; } was unlayered CSS, so it always beat Tailwind utility classes (e.g. w-24) on images inside .prose — this is why AI agent logos in /changelog/2026/08/connect-your-own-ai-agent couldn't be sized down.

Moves the rule into @layer components so utility classes can override it, while it stays the default everywhere else. This affects .prose sitewide (blog, changelog, customer stories, etc.), not just that one page — checked existing content and found nothing relying on the old behavior. handbook/ and docs/ are unaffected (already opt out via prose-natural-size-images).

Also fixed a comment on AgentSetupTabs that was now inaccurate about .prose img being unlayered.

Related Issue(s)

Checklist

  • I have read the contribution guidelines
  • I have considered the performance impact of these changes
  • Suitable unit/system level tests have been added and they pass
  • Documentation has been updated
  • For blog PRs, an Art Request has been created (instructions)

@Yndira-E Yndira-E changed the title Move default class to the components layer Fix: enable custom size for img in changelog Aug 31, 2026
@netlify

netlify Bot commented Aug 31, 2026

Copy link
Copy Markdown

Deploy Preview for flowforge-website ready!

Name Link
🔨 Latest commit f3b0925
🔍 Latest deploy log https://app.netlify.com/projects/flowforge-website/deploys/6a95c1cdf16be100088aab4d
😎 Deploy Preview https://deploy-preview-5719--flowforge-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 62 (🟢 up 13 from production)
Accessibility: 96 (no change from production)
Best Practices: 100 (no change from production)
SEO: 85 (🔴 down 7 from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@Yndira-E
Yndira-E force-pushed the fix/changelog-imgs branch from 4d0181f to f3b0925 Compare August 31, 2026 18:02
@Yndira-E Yndira-E changed the title Fix: enable custom size for img in changelog Fix: let utility classes override .prose image sizing Aug 31, 2026
@Yndira-E
Yndira-E enabled auto-merge August 31, 2026 18:05
@Yndira-E
Yndira-E merged commit 3cb2c8e into main Aug 31, 2026
7 checks passed
@Yndira-E
Yndira-E deleted the fix/changelog-imgs branch August 31, 2026 18:08
dimitrieh added a commit that referenced this pull request Sep 2, 2026
This reverts commit 942f543.

Superseded on main by #5719, which fixed
the same thing more generally: the offending
.prose:not(.prose-natural-size-images) img rule now sits inside
@layer components, and an unlayered rule beats any layered one whatever its
specificity, so .ff-agent-tab img wins on its own and every other component whose
unlayered styles that rule was outranking is fixed too, not just this one.

The picker only looked broken here because this branch predates that change.
dimitrieh added a commit that referenced this pull request Sep 2, 2026
This reverts commit 942f543.

Superseded on main by #5719, which fixed
the same thing more generally: the offending
.prose:not(.prose-natural-size-images) img rule now sits inside
@layer components, and an unlayered rule beats any layered one whatever its
specificity, so .ff-agent-tab img wins on its own and every other component whose
unlayered styles that rule was outranking is fixed too, not just this one.

The picker only looked broken here because this branch predates that change.
dimitrieh added a commit that referenced this pull request Sep 2, 2026
This reverts commit 942f543.

Superseded on main by #5719, which fixed
the same thing more generally: the offending
.prose:not(.prose-natural-size-images) img rule now sits inside
@layer components, and an unlayered rule beats any layered one whatever its
specificity, so .ff-agent-tab img wins on its own and every other component whose
unlayered styles that rule was outranking is fixed too, not just this one.

The picker only looked broken here because this branch predates that change.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant