From 16f98ed250fce7680e4618d2aa13355cffec6dd5 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Fri, 29 Dec 2017 20:25:48 +0300
Subject: [PATCH] auto-adjust #add-style-wrapper to various font height

---
 manage.html       |  2 +-
 manage/manage.css | 26 +++++++++++++++++++-------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/manage.html b/manage.html
index b59daff6..4ca43556 100644
--- a/manage.html
+++ b/manage.html
@@ -276,7 +276,7 @@
 
   <div id="add-style-wrapper">
     <a href="edit.html">
-      <button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1"></button>
+      <button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1" class="nowrap"></button>
     </a>
     <label id="add-style-as-usercss-wrapper">
       <input type="checkbox" id="newStyleAsUsercss">
diff --git a/manage/manage.css b/manage/manage.css
index 2680f469..a8b9cf87 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -90,22 +90,34 @@ select {
 #add-style-wrapper {
   display: flex;
   align-items: center;
-  padding-bottom: 1.5em;
+  padding-bottom: 1.25em;
+  white-space: nowrap;
+  flex-wrap: wrap;
+}
+
+#add-style-wrapper > * {
+  /* in case the children are wrapped */
+  margin-bottom: .25em;
 }
 
 #add-style-as-usercss-wrapper {
-  display: inline-flex;
-  margin-top: 3px;
+  display: flex;
+  align-items: center;
 }
 
 #add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a svg {
   fill: #aaa;
 }
 
-#add-style-as-usercss-wrapper #usercss-wiki {
-  position: absolute;
-  right: -20px;
-  top: -3px;
+#add-style-as-usercss-wrapper input {
+  bottom: 0;
+  margin: auto;
+}
+
+#add-style-as-usercss-wrapper input + svg {
+  bottom: 0;
+  margin: auto;
+  left: 2px;
 }
 
 #installed {