enhance.dev
enhance.dev copied to clipboard
enhance-dev
Fix overflowing issues in callouts
The callouts overflows the screen on mobile screens. The main cause of this issue is the long code blocks in callouts. I fix the issue by giving a min-width: 0 property to the content div of the callout. Because that div is a flex item and min-width: auto by default, the min width of the div is the min-content without breaking any text. When we give min-width: 0, the element correctly shrinks and a scroll-bar appears for the code content. Also now the inline code can correctly wraps to the next line.
Before: (The callout content overflows)
After: (The overflowling issue is solved with
min-width property)
