Improve wrapping layout for small resolutions (#1181)

2 files changed, 18 insertions, 9 deletions

diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index 4015ce79..fcbeb0cb 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -596,6 +596,15 @@ h3 {
 .settings-item-children.settings-item-children-group .settings-item-left {
     padding-left: 0;
 }
+.settings-item-children.settings-item-children-group .settings-item-inner.settings-item-inner-wrappable>.settings-item-left:not(:last-child) {
+    padding-right: calc(
+        var(--settings-group-inner-horizontal-padding-half-wrappable) +
+        var(--settings-group-inner-horizontal-padding-half-wrappable)
+    );
+}
+.settings-item-children.settings-item-children-group .settings-item-inner.settings-item-inner-wrappable>.settings-item-right {
+    padding-left: 0;
+}
 .settings-item-children.settings-item-children-group .settings-item-children {
     padding-left: 0;
 }
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index 65b5de5a..41cd3946 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -253,7 +253,7 @@
                 </p>
             </div>
             <div class="settings-item-children settings-item-children-group" id="main-dictionary-container" hidden>
-                <div class="settings-item"><div class="settings-item-inner">
+                <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
                     <div class="settings-item-left">
                         <div class="settings-item-label">Primary dictionary</div>
                     </div>
@@ -333,7 +333,7 @@
             </div>
         </div></div>
         <div class="settings-item">
-            <div class="settings-item-inner">
+            <div class="settings-item-inner settings-item-inner-wrappable">
                 <div class="settings-item-left">
                     <div class="settings-item-label">
                         Support inputs for devices with touch screens
@@ -379,7 +379,7 @@
                 </div>
             </div>
             <div class="settings-item-children settings-item-children-group" id="auto-hide-search-popup-options" hidden>
-                <div class="settings-item"><div class="settings-item-inner">
+                <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
                     <div class="settings-item-left">
                         <div class="settings-item-label">Auto-hide delay <span class="light">(in milliseconds)</span></div>
                     </div>
@@ -389,7 +389,7 @@
                 </div></div>
             </div>
         </div>
-        <div class="settings-item"><div class="settings-item-inner">
+        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
                 <div class="settings-item-label">Scan delay <span class="light">(in milliseconds)</span></div>
                 <div class="settings-item-description">When no key or button is required for scanning, the delay before scanning occurs.</div>
@@ -593,7 +593,7 @@
                 </div>
             </div>
         </div>
-        <div class="settings-item"><div class="settings-item-inner">
+        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
                 <div class="settings-item-label">Glossary layout</div>
                 <div class="settings-item-description">Configure how term glossaries are displayed.</div>
@@ -652,7 +652,7 @@
             </div>
         </div>
         <div class="settings-item advanced-only">
-            <div class="settings-item-inner">
+            <div class="settings-item-inner settings-item-inner-wrappable">
                 <div class="settings-item-left">
                     <div class="settings-item-label">
                         Pitch accent display styles
@@ -937,7 +937,7 @@
                 </p>
             </div>
         </div>
-        <div class="settings-item"><div class="settings-item-inner">
+        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
                 <div class="settings-item-label">Maximum clipboard text search length</div>
                 <div class="settings-item-description">Limit the number of text characters used when searching clipboard content.</div>
@@ -1441,7 +1441,7 @@
     </div>
     <div class="settings-group advanced-only">
         <div class="settings-item">
-            <div class="settings-item-inner settings-item-inner-wrappable">
+            <div class="settings-item-inner">
                 <div class="settings-item-left">
                     <div class="settings-item-label">
                         Use a secure container around popups
@@ -1465,7 +1465,7 @@
             </div>
         </div>
         <div class="settings-item">
-            <div class="settings-item-inner settings-item-inner-wrappable">
+            <div class="settings-item-inner">
                 <div class="settings-item-left">
                     <div class="settings-item-label">
                         Use secure popup frame URL