Rollup merge of #93420 - jsha:adjust-settings-layout, r=GuillaumeGomez

Improve wrapping on settings page

Previously, the radio button choices for themes would wrap awkwardly on
narrow screens. With this change, the group of choices will prefer
bumping down to the next line together, leaving the setting name on its
own line.

Also fix some minor spacing issues:

 - Align the setting name vertically with the radio button choices.
 - Use margin instead of padding for most spacing choices.
 - Use no margin/padding on the right-hand side.

 Demo: https://rustdoc.crud.net/jsha/adjust-settings-layout/settings.html

 r? ``@GuillaumeGomez``

Before (narrow screen):

![image](https://user-images.githubusercontent.com/220205/151555533-7ab65216-d178-4dcc-8792-3c8fb9da8718.png)

After (narrow screen):

![image](https://user-images.githubusercontent.com/220205/151555702-ad79af32-f84b-4ee4-ae7a-1a2a463c0f6f.png)

Author: matthiaskrgr

src/librustdoc/html/render/mod.rs

@@ -376,7 +376,7 @@ impl Setting {
                 description,
             ),
             Setting::Select { js_data_name, description, default_value, ref options } => format!(
-                "<div class=\"setting-line\"><div class=\"radio-line\" id=\"{}\"><span class=\"setting-name\">{}</span>{}</div></div>",
+                "<div class=\"setting-line\"><div class=\"radio-line\" id=\"{}\"><span class=\"setting-name\">{}</span><div class=\"choices\">{}</div></div></div>",
                 js_data_name,
                 description,
                 options

src/librustdoc/html/static/css/settings.css

@@ -1,5 +1,5 @@
 .setting-line {
-	padding: 5px;
+	margin: 0.6em 0 0.6em 0.3em;
 	position: relative;
 }
 
@@ -17,17 +17,16 @@
 	border-bottom: 1px solid;
 }
 
-.setting-line .radio-line {
+.setting-line .radio-line,
+.setting-line .choices {
 	display: flex;
 	flex-wrap: wrap;
 }
 
-.setting-line .radio-line > * {
-	padding: 0.3em;
-}
-
 .setting-line .radio-line .setting-name {
 	flex-grow: 1;
+	margin-top: auto;
+	margin-bottom: auto;
 }
 
 .setting-line .radio-line input {
@@ -38,7 +37,10 @@
 	border-radius: 0.1em;
 	border: 1px solid;
 	margin-left: 0.5em;
-	min-width: 3.5em;
+	margin-top: 0.1em;
+	margin-bottom: 0.1em;
+	min-width: 3.8em;
+	padding: 0.3em;
 }
 
 .toggle {

src/test/rustdoc-gui/mobile.goml

@@ -19,3 +19,9 @@ assert-css: (".content .out-of-band .since::before", { "content": "\"Since \"" }
 
 size: (1000, 1000)
 assert-css-false: (".content .out-of-band .since::before", { "content": "\"Since \"" })
+
+// On the settings page, the theme buttons should not line-wrap. Instead, they should
+// all be placed as a group on a line below the setting name "Theme."
+goto: file://|DOC_PATH|/settings.html
+size: (400, 600)
+compare-elements-position-near-false: ("#preferred-light-theme .setting-name", "#preferred-light-theme .choice", {"y": 16})