sourcegraph/doc/code_monitoring
Tim Lucas 2784246a7a
Improve readability on small screens and reduce layout shift (#55600)
Various cleanups to improve reading docs on small screens and layout
shifts on page load:

* Reduces the horizontal padding on small screens
* Stacks the getting started boxes vertically on small screens (I
believe there are similar `.card` styles that also need fixing)
* Removes the top margin on the sidebar which is causing a weird body
scroll
* Fixes the layout shift that happens on load for search box and index
page header image

| Before | After |
| - | - |
| <img width="686" alt="Screenshot 2023-08-07 at 4 40 28 pm"
src="https://github.com/sourcegraph/sourcegraph/assets/153/1f7b4716-e2ad-4e14-9de5-c5914aa8c639">
| <img width="686" alt="Screenshot 2023-08-07 at 4 39 58 pm"
src="https://github.com/sourcegraph/sourcegraph/assets/153/6c0c7ebc-de53-48bc-86ab-638ebc84aa00">
|
| <img width="686" alt="Screenshot 2023-08-07 at 4 40 34 pm"
src="https://github.com/sourcegraph/sourcegraph/assets/153/669990b0-9392-4c0f-bdf2-ad7d3be91809">
| <img width="686" alt="Screenshot 2023-08-07 at 4 40 10 pm"
src="https://github.com/sourcegraph/sourcegraph/assets/153/cc7759be-b61a-4e28-ac10-58ff82f6ffcf">
|
| <img width="269" alt="Screenshot 2023-08-07 at 4 41 21 pm"
src="https://github.com/sourcegraph/sourcegraph/assets/153/699d7e4c-05c6-481f-bb04-1e15ca711888">
| <img width="266" alt="Screenshot 2023-08-07 at 4 41 12 pm"
src="https://github.com/sourcegraph/sourcegraph/assets/153/7fe6c15a-f8de-4b42-a117-ec0d90193214">
|

Loading layout jank before:


https://github.com/sourcegraph/sourcegraph/assets/153/182ec700-158e-439b-9de9-3a6fdf8ca79a

Loading layout jank after:


https://github.com/sourcegraph/sourcegraph/assets/153/aae86d19-79b2-4375-a7f1-7df6d183c975

## Test plan

- In browser tested different themes and screen sizes
2023-08-07 08:54:41 -07:00
..
explanations code monitors: enable webhooks for everyone (#37037) 2022-06-10 14:16:21 -07:00
how-tos Fix typos in documentation (#52407) 2023-06-21 07:52:54 -07:00
campaigns-icon.svg Code monitoring: docs (#16173) 2020-12-16 02:24:15 +08:00
file-icon.svg Code monitoring: docs (#16173) 2020-12-16 02:24:15 +08:00
index.md Improve readability on small screens and reduce layout shift (#55600) 2023-08-07 08:54:41 -07:00
quickstart.md fix bad link (#44590) 2022-12-09 01:30:54 -08:00