I can see the issue in the screenshot - the inline code elements like config/pages-content.tsx, config/site.ts, and config/pages-config.ts are each taking their own line when they should flow inline with the text. The problem is the white-space: nowrap property combined with other styling. Let me fix this:
Fixed the inline code styling by removing white-space: nowrap and adding word-break: break-word with explicit monospace font. This allows inline code to flow naturally with surrounding text on the same line while maintaining its background styling and distinctive font.
Still the fucking same.. attaching screenshot of what i mean.. in text description tho -- make the inline code styling only add the background behind the actual inline code text and don't make it reserve a new line, make it stay in the same line as it should be, so other text is able to be infront of it and behind it visualized on the website
I can see the issue clearly in the screenshot. The inline code elements like config/pages-content.tsx, config/site.ts, and config/pages-config.ts are each taking their own line and pushing text below them, when they should flow inline with the surrounding text. Let me fix this by ensuring the inline code truly behaves as an inline element:
I can see the issue clearly now. The inline code CSS has display: inline which should work, but the problem is that it's rendering as a block-level element somewhere. Looking at the markdown renderer, inline code gets wrapped by ReactMarkdown but should stay inline. The CSS looks correct, so the issue must be coming from how React is rendering it. Let me ensure the inline code truly flows inline:
Fixed the inline code display by adding !important declarations and removing extra classes that were interfering with inline rendering. The inline code now properly flows with surrounding text instead of forcing new lines, while maintaining its background styling and monospace font.