search

colin-scott / interactive_latencies

Jeff Dean's latency numbers plotted over time
MIT License
2.06k stars 455 forks source link

Fix responsiveness issues on certain zoom levels and mobile devices #23

Open sivakusayan opened 1 month ago

sivakusayan commented 1 month ago

Issue

Previously, there would be overlaps between the SVG rectangles and the text besides them at certain zoom levels. For example, below is a screenshot of the web page on Chromium at ~150% zoom:

The interactive latencies website on Chrome at 150% zoom. There are overlaps between the SVG rectangles and the accompanying text.

In addition, the site would also look extremely zoomed out and be hard to read on mobile devices. For example, here is how the website renders on an iPhone SE (albeit simulated by Chromium developer tools):

A simulated rendering of the interactive latencies website on an iPhone SE. The site is so zoomed out that it only takes up half of the screen, and there are overlaps between the SVG rectangles and the accompanying text.

Fix

We use the built-in CSS grid and flexbox layouts instead of Bootstrap's utility classes to make the website responsive, both of which have good support on major browsers. This fixes the SVG overlap issue, and displays the website reasonably well on mobile devices, as demonstrated by this video:

https://github.com/user-attachments/assets/3dc4a1cb-8830-4632-a21b-0203061ccde8

Changes were tested on Chromium, Firefox, and Webkit on macOS. I can test this change on Windows and Linux once I get home, but I'd be surprised if there were issues on those platforms.