Node: Avoid small initial text for API docs on pages with wide tables

[Krinkle]

The Crypto docs have a wide table down the page somewhere. On smaller viewports, this causes the text to be small, and the initial rendering of the page to be zoomed out to include the excess overflow to the right.

| iOS Chrome | iOS Chrome
|--|--
| |

| iOS Firefox Focus
|--
|

Below is a comparison to FS docs, which renders correctly (notice the larger text and edges of the content aligned with the viewport)

| Chrome DevTools (FS docs) | Chrome DevTools (Crypto docs)
|--|--
| |

[Trott]

@nodejs/website

[fhemberger]

@Trott Docs are not in the website repo. ;)

A quick hack which could solve the issue:

@media screen and (max-width: 750px) {
    th { display: none; }

    td {
        display: block;
        border: none;
        padding: 1rem 0 0;
    }

    td:nth-child(even) {
        padding: 0 0 1rem;
        border-bottom: 1px solid #ccc        
    }

    td a {
        padding: 0 !important;
        word-break:break-word;
    }
}

[Trott]

@Trott Docs are not in the website repo. ;)

I know, but I figure the website folks would have opinions about the right way to do this, and that their opinions are probably more informed than most other Collaborators. :-D

[Krinkle]

Another solution could be to make the tables scrollable if they are too big. This means the page and the table would render as normal with legible font sizes and no zooming needed.

Users can pan them, like a carrousel (sort of).

I've seen a similar approach on other sites, including here on GitHub:

| Headers | .. | There | are | so | many | of | you | .. | No, | really | there | are | _that_ | many | .. | .. | Look!
|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--
| x | .. | ..
| y | .. | ..
| z | .. | ..

.content table {
  display: block;
  overflow: auto;
  max-width: 100%;
}

Reducing the width within the table, as @fhemberger shows, is probably better for individual cases, but harder to generalise (depends on the table). Afaik the rules wouldn't conflict, so perhaps both could work (one generally, and one specific to the kind of table on the crypto page).

[ChALkeR]

Note that code is also wide and needs to be broken because of long OpenSSL option names:

@media screen and (max-width: 750px) {
  td a, td code {
     word-break: break-word;
  }
}

Apart from that, the solution by @fhemberger looks nice, I think.

Scrolling tables is a nice idea in general, but it doesn't make sense to scroll tables because of long links. And after breaking links, we might not need to scroll tables at all, I think?

[jasnell]

Looking at the docs in chrome on android, it looks like this is resolved. Can we close this?

[Krinkle]

The original link is still broken for me currently in the same way as before (see issue description). However I can confirm that this has been improved in newer releases.

For example: https://nodejs.org/docs/v14.0.0/api/crypto.html#crypto_openssl_options

Here the table wraps words correctly so as to avoid overflow leaking and viewport widening.