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.

3 files changed, 16 insertions, 8 deletions

diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs
index 32e4a829184..a512511cff3 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 acde1123925..9edf662976d 100644
--- a/src/test/rustdoc-gui/mobile.goml
+++ b/src/test/rustdoc-gui/mobile.goml
@@ -15,3 +15,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})