search

Wellingborough / LMC

Little Man Computer Simulator
https://wellingborough.github.io/LMC/
GNU General Public License v3.0
1 stars 4 forks source link

Overall height incorrect on Chrome on laptop #22

Open Wellingborough opened 2 years ago

Wellingborough commented 2 years ago

Requires investigation, but on my laptop (1366x768) the UI renders such that a vertical scroll bar is required.

Wellingborough commented 2 years ago

Requires further investigation. The problem also appears on Safari on iPadOS. This appears to be because Safari thinks the viewport size excludes the tabs at the top of the window, so the 95vh sizing on the codetableholder causes it to be bigger than the visible area - and then Safari allows you to scroll down and minimises the tabs. The only solution I have found so far, after a huge amount of fiddling around with browser detection, different HTML CSS and JS designs, is to set the codetableholder to 85vh, which fits perfectly Safari/iPadOS, but leaves quite a bit of dead space at the bottom of the left-hand panel on Windows (and Firefox/iPadOS, but not Chrome/iPadOS which looks like it behaves in the same way as Safari).

Wellingborough commented 2 years ago

Detecting the browser seemed to work OK (ish) although it is clearly a suboptimal solution, but even then I had some problems which I can no longer recall - having spent far too much time and energy, and got far too frustrated with the problem. I think perhaps we should tackle this in CSS and have a switch to set the max-height of ?? codetableholder or the code-table itself? That is part of the problem, as we seem to have to set both, whereas I would expect that just setting the max-height of the holder div would be sufficient.

Actually, we need to look in more detail at how the Tabulator table is set up - it may be that this is forcing the resize.

Wellingborough commented 2 years ago

We need to look at our use of the viewport meta tag. This indicates that the site is mobile-friendly, but Google's web crawler decides (with some justification) that it is not. This is having an impact on the search results. It may also be part of the problem identified in this issue (although I suspect not). We could, perhaps, redesign to have the three main areas render in a column on a smartphone in portrait mode. This would be quite a lot of work for potentially little return however. It might be better, if possible, to just indicate that the page is not mobile friendly.