zig icon indicating copy to clipboard operation
zig copied to clipboard

Update styles in std docs to correct display glitch

Open mscott9437 opened this issue 2 years ago • 0 comments

This is to address a small glitch in the std docs styles, where the bottom section gets cutoff on the mobile viewport. Also on the desktop, at the regular or narrow viewport, the scroll bar indicator overflows the bottom of the page.

Regular desktop at wide viewport-- desktop-scrollbar-overflows-window

Regular desktop at wide viewport with corrections-- desktop-corrected

Regular desktop at narrow viewport-- desktop-narrow-bottom-cutoff

Regular desktop at narrow viewport with correcctions-- desktop-narrow-corrected

Mobile screen vertical-- mobile-vertical-cutoff-at-bottom

Mobile screen vertical with corretions-- mobile-corrected

Mobile screen horizontal is not affected by the glitch-- mobile-horizontal-not-affected

I tried to find the most basic way to patch this without interfering with the layout. Thankfully I was able to patch the styles directly, in just 2 places. The first will remove the bottom padding from the .docs container. This corrects the issue on regular desktop view but not mobile. The second removes the display: block from the .flex-main container at the mobile viewport. Since this is a flex container, the display: block will negate the flex properties, as display: flex is already being used here. So a combination of these two line edits corrected the problem for me in all views.

mscott9437 avatar Dec 24 '23 15:12 mscott9437