Improve Responsive Image Handling in Docs (Remove Inline Widths, Avoid Media Queries, No !important) #547
Description
The current CSS solution relies on media queries and !important declarations, which can be fragile and harder to maintain. The goal of this issue is to refactor and optimize the current solution for better long-term maintainability and scalability.
Screenshots that are too low in quality should ideally be excluded from the docs or not used in figure components, to preserve visual clarity and professionalism.
Optimization Goals:
-
Eliminate media queries
- Replace fixed breakpoint rules with more adaptive techniques such as
max-width,min-width, andcalc()to allow fluid layouts across any screen size.
- Replace fixed breakpoint rules with more adaptive techniques such as
-
Avoid
!importantusage- Refactor selectors and specificity to override inline styles cleanly without relying on
!important.
- Refactor selectors and specificity to override inline styles cleanly without relying on
-
Improve scaling for various image types
- Allow small but high-quality images to retain their native resolution.
- Prevent large or low-resolution images from being upscaled and pixelated.