From 9b929ffcd4bf34b784b94137f636a8a483b1f18e Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 28 Sep 2019 13:30:41 -0400
Subject: [PATCH] Add wrapping for usage conditions on small screens

---
 ext/bg/css/settings.css | 30 ++++++++++++++++++++++++++++++
 ext/bg/settings.html    |  3 ++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index 150209e3..12bbe8a8 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -48,6 +48,20 @@
     border-color: #f00000;
 }
 
+.condition {
+    display: flex;
+    -flex-wrap: wrap;
+}
+.condition-input {
+    flex: 1 1 auto;
+}
+.condition-line-break {
+    flex: 1 0 100%;
+    display: none;
+}
+.condition>.input-group-btn {
+    width: auto;
+}
 .condition>.condition-prefix:after {
     content: "IF";
 }
@@ -55,6 +69,9 @@
     content: "AND";
 }
 
+.input-group .condition-prefix {
+    flex: 0 0 auto;
+}
 .input-group .condition-prefix,
 .input-group .condition-group-separator-label {
     width: 60px;
@@ -122,3 +139,16 @@
         margin-top: 15px;
     }
 }
+
+@media screen and (max-width: 600px) {
+    .condition {
+        flex-wrap: wrap;
+    }
+    .condition-input {
+        order: 2;
+    }
+    .condition-line-break {
+        display: block;
+        order: 1;
+    }
+}
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 4db0a9b0..1406826b 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -105,7 +105,8 @@
                     <div class="input-group-addon condition-prefix"></div>
                     <div class="input-group-btn"><select class="form-control btn btn-default condition-type"><optgroup label="Type"></optgroup></select></div>
                     <div class="input-group-btn"><select class="form-control btn btn-default condition-operator"><optgroup label="Operator"></optgroup></select></div>
-                    <input type="text" class="form-control" />
+                    <div class="condition-line-break"></div>
+                    <div class="condition-input"><input type="text" class="form-control" /></div>
                     <div class="input-group-btn"><button class="btn btn-danger condition-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button></div>
                 </div></template>
                 <template id="condition-group-separator-template"><div class="input-group">