Thank you for raising this. We have a general image sizing problem in our docs. And you should be able to find more examples of oversized images easily.

@EdwardAngert may have plans to fix these systematically.

thanks @matifali ! I don't know if Vercel wasn't refreshing correctly or if it was something about the way I did it, but I tested with <img src... and the nextjs <Image tag, and <Image> was more successful

check it out in https://coder.com/docs/@template-from-scratch-update/tutorials/template-from-scratch#7-create-the-template-in-coder

<Image height="412px" src="../images/templates/coder-login-web.png" alt="Log in to your Coder deployment" align="center" />

I'll put a PR in for this one - I think there are probably bunches more we can probably lint for... eventually

@matifali I'm testing that PR with a max-width attribute, if that succeeds, I feel like we can find somewhere in src/components/Docs /HTMLRenderer.tsx Lines 107-110 to make it a rule, but I'm not totally sure how just yet. I can poke around later, but figured I'd drop it here in case it's something you already know about 🤞

source: https://nextjs.org/docs/pages/api-reference/components/image#sizes

edit edit: I might just need to take a new screenshot and set this aside. seems like the attrib I referred to gets overridden by the CSS when rendered? there's a potential answer I found on stack overflow, but I haven't tried to work that into our CSS