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)

3 files changed, 16 insertions, 8 deletions

diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs
index cc12b7ba05b..59a6187b62b 100644
--- a/src/librustdoc/html/render/mod.rs
+++ b/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
diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css
index 932000487b0..7b337c2bc7a 100644
--- a/src/librustdoc/html/static/css/settings.css
+++ b/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 {
diff --git a/src/test/rustdoc-gui/mobile.goml b/src/test/rustdoc-gui/mobile.goml
index 8f9c9248f5f..7be46a613c4 100644
--- a/src/test/rustdoc-gui/mobile.goml
+++ b/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})