Update code element's display property

[IAmYoungbossy]

Changed the "display" property of the "code" element to "grid" to fix an issue where the green code highlighter ("span" element) did not highlight the entire line of code on mobile or smaller screen devices. The issue was caused by the parent "code" element being inline and not filling up the entire width of its parent "pre" element.

Screenshots of the issue before and after the changes are included for better visualization.

Before:

After:

This change only affects the "code" element and does not impact any other CSS rules or elements.

[MichaelDeBoey]

@mcansh I think this broke code highlighting for lines that are smaller than full width 🤔

[IAmYoungbossy]

Okay, thanks for letting me know. Let me try to fix that right now.

[IAmYoungbossy]

I found a solution to the issue above. The code element is an inline property, meaning it flows with surrounding texts. Setting the display property as display: inline-block; changes the display behavior of the element to behave like a block-level element in terms of allowing you to set the width and height properties, but it still flows with the surrounding text as an inline element.

The above senorio makes the code element not to assume the fill width of its parent element (pre). So to resolve that, we can explicitly set the min-width property as 100% (min-width: 100%;). This will make the code element assume the width of its parent container thereby making the highlighting span elements which are children of code element span the entire length of the code it is highlighting.

I would be making a new pull request with my updated solution referencing this particular one. Below are screenshots of the highlighting span after applying the above rule.

Fix: Destop View

Fix: Mobile View

@mcansh @mrkurt @MichaelDeBoey @machour

[MichaelDeBoey]

@IAmYoungbossy Could you create a PR with the update please?

[IAmYoungbossy]

@MichaelDeBoey Yes, I just created a PR. Here's the reference #64 Thanks.