From c790128c3c2c26a4ca347fd68cffd4000ecb3295 Mon Sep 17 00:00:00 2001
From: Jacob Hoffman-Andrews <github@hoffman-andrews.com>
Date: Fri, 28 Jan 2022 05:21:34 -0800
Subject: [PATCH] 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.
---
 src/librustdoc/html/render/mod.rs           |  2 +-
 src/librustdoc/html/static/css/settings.css | 16 +++++++++-------
 src/test/rustdoc-gui/mobile.goml            |  6 ++++++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs
index 32e4a82918421..a512511cff3b0 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 932000487b0a8..7b337c2bc7a33 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 acde112392521..9edf662976d59 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})