Mobile layout broken

[tuner]

Hi Colin,

e11c644 and a02d2ff broke the mobile view. I noticed that when I clicked your twitter links.

Instead of using constant-height cards, I propose that links with anchors display only a single card. The list is now getting quite long and it takes ages to scroll to the top of the page – especially when using a phone of touchpad. Macs don't even have a scrollbar visible by default.

[cmdcolin]

thanks for catching this...I did a couple more updates to try to avoid this layout issue. It was a bit hasty to make anchor links require constant-height cards. it may be cool to make actual single-pages for each tool with extra info perhaps like a single-tool anchor link, it might be ok with the layout now though

[cmdcolin]

added scroll to top button too!

[tuner]

I think the jumping layout with variable-height cards could be fixed by adding width/height attributes to the image tags. Those dimensions would have to be recorded somewhere, though, and having them in the TOOLS.json would be a bit cumbersome.

Perhaps this could be automated into the build process: A script goes through the images and creates a image-dimensions.json:

{
  "awesome-tool.png": [300, 200],
  "another-tool.png": [300, 300]
}

Or alternatively, just have them in the TOOLS.json, and a script adds the missing dimensions.

I can try to fix this at some point if you are ok with variable-height cards.

[cmdcolin]

mmm yes... this would be fine with me. very google lighthouse score friendly too...lot of focus on avoiding layout shift by them

[cmdcolin]

the images now contain their dimensions, so there are now less "scrolls within scrolls" and layout shift type stuff

feel free to try :)

[cmdcolin]

maybe can close. thanks for your continued feedback throughout this little project!