Rollup merge of #56874 - JohnHeitmann:docs-spacing, r=GuillaumeGomez

Simplify foreign type rendering.

Simplified foreign type rendering by switching from tables to flexbox. Also, removed some seemingly extraneous elements like “ghost” spans.

Reduces element count on the `std::iter::Iterator` page by 30%. On my laptop it drops Iterator page load time from ~15s to ~10s. Frame times during scrolling are a hair lower too.

Known visual changes (happy to tweak based on feedback):
* The main `impl ...` headers are now getting the default, larger, h3 font size. This was an accident, but I liked how it turned out so I didn't fix it.
* There's a hair less vertical spacing between the end of a where block and the start of the next fn. Now, all spacing is consistent. I think this looks a bit worse. I may tweak vertical spacing more here or in a follow-up that cleans up vertical spacing more broadly.
* "[src]" links are all sized at 17px. A few were 19px in the original.

I haven't yet done heavy cross-browser or cross-crate testing. I was hoping to get a quick thumbs up or thumbs down here at this first draft, then if this is on the right track I'll spend some time on that testing.

TODO:

- [x] Test on Chrome
- [x] Test on Firefox
- [ ] ~~Test on UC Android~~
- [x] Test on Edge
- [x] Test on iOS safari
- [x] Test on desktop safari
- [x] Update automated tests
- [x] Increase vertical margin
- [x] Fix "Important traits for" hover overlap
- [x] Wait for #55798 to land & merge it

src/librustdoc/html/static/main.js

@@ -2409,8 +2409,17 @@ if (!DOMTokenList.prototype.remove) {
             e.remove();
         });
         onEachLazy(main.childNodes, function(e) {
+            // Unhide the actual content once loading is complete. Headers get
+            // flex treatment for their horizontal layout, divs get block treatment
+            // for vertical layout (column-oriented flex layout for divs caused
+            // errors in mobile browsers).
             if (e.tagName === "H2" || e.tagName === "H3") {
-                e.nextElementSibling.style.display = "block";
+                let nextTagName = e.nextElementSibling.tagName;
+                if (nextTagName == "H2" || nextTagName == "H3") {
+                    e.nextElementSibling.style.display = "flex";
+                } else {
+                    e.nextElementSibling.style.display = "block";
+                }
             }
         });
     }