Vulnerability code flow page - styling

1. Clipping of focus state

The focus state styles for some elements are partially hidden or clipped. If possible, ensure the entire focus state is fully visible.

2. UI Polish on the number badges

The number badges could use a bit more refinement/customization. I recommend setting a fixed or minimum height and width for the badges on the left side of the page. This will give the steps some breathing room and make the UI feel more polished. Based on the live page, 32px by 32px seems like a good size, but 24px by 24px would also work—either is fine with me. Additionally, consider bolding the text when a badge is focused to add some extra emphasis.

3. Change font-color of line number

I recommend updating the text color of the line number in the steps to `neutral 600 (#626168)` to differentiate it from the code exerpt.

4. Fix page overflow issue

In the example below, the code flow tab has a lot of whitespace beneath the content, yet the page is still scrollable. Ideally, the page shouldn’t scroll if the content doesn’t extend beyond the viewport. Arc_-Improper_neutralization_of_special_elements_used_in_an_OS_Command___OS_Command_Injection_____GitLab.org-security-products-oxeye-dogfooding-python-_Oxeye_Integration_Demo___GitLab_2024-08-08_at_10.39.03_AM

5. Consider improving tab navigation

When tabbing through the page, it seems that a few important elements are being skipped. Both tabs (Details and Code Flow) and each step in the left column should be included in the tab navigation. Arc_-Improper_neutralization_of_special_elements_used_in_an_OS_Command___OS_Command_Injection_____GitLab.org-security-products-oxeye-dogfooding-python-_Oxeye_Integration_Demo___GitLab_2024-08-08_at_10.56.42_AM