Switched toggle string dropdown sides and removed form-control padding

src/web/HTMLIngredient.mjs

@@ -70,14 +70,6 @@ class HTMLIngredient {
                 break;
             case "toggleString":
                 html += `<div class="form-group input-group">
-                    <div class="input-group-prepend">
-                        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${this.toggleValues[0]}</button>
-                        <div class="dropdown-menu toggle-dropdown">`;
-                for (i = 0; i < this.toggleValues.length; i++) {
-                    html += `<a class="dropdown-item" href="#">${this.toggleValues[i]}</a>`;
-                }
-                html += `</div>
-                    </div>
                     <div class="toggle-string">
                         <label for="${this.id}" class="bmd-label-floating toggle-string">${this.name}</label>
                         <input type="text"
@@ -88,6 +80,15 @@ class HTMLIngredient {
                             ${this.disabled ? "disabled" : ""}>
                         ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
                     </div>
+                    <div class="input-group-append">
+                        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${this.toggleValues[0]}</button>
+                        <div class="dropdown-menu toggle-dropdown">`;
+                for (i = 0; i < this.toggleValues.length; i++) {
+                    html += `<a class="dropdown-item" href="#">${this.toggleValues[i]}</a>`;
+                }
+                html += `</div>
+                    </div>
+
                 </div>`;
                 break;
             case "number":

src/web/stylesheets/components/_operation.css

@@ -59,6 +59,26 @@ div.toggle-string {
     flex: 1;
 }
 
+.operation [class^='bmd-label'],
+.operation [class*=' bmd-label'],
+.operation label {
+    color: #388e3c;
+}
+
+.operation .is-focused [class^='bmd-label'],
+.operation .is-focused [class*=' bmd-label'],
+.operation .is-focused [class^='bmd-label'],
+.operation .is-focused [class*=' bmd-label'],
+.operation .is-focused label {
+    color: #1976d2;
+}
+
+.operation .form-control {
+    background-color: transparent;
+    border-color: var(--primary-border-colour);
+    color: var(--primary-font-colour);
+}
+
 .bmd-form-group.is-filled div.toggle-string label.bmd-label-floating,
 .bmd-form-group.is-focused div.toggle-string label.bmd-label-floating {
     left: unset;

src/web/stylesheets/layout/_operations.css

@@ -31,32 +31,3 @@
     border: 2px dashed var(--rec-list-operation-font-colour) !important;
     padding: 8px 8px 9px 8px;
 }
-
-.operation input.form-control,
-.operation select.form-control,
-.operation textarea,
-.operation .bmd-label-floating,
-.operation .bmd-label-static {
-    padding-left: 5px;
-    padding-right: 5px;
-}
-
-.operation [class^='bmd-label'],
-.operation [class*=' bmd-label'],
-.operation label {
-    color: #388e3c;
-}
-
-.operation .is-focused [class^='bmd-label'],
-.operation .is-focused [class*=' bmd-label'],
-.operation .is-focused [class^='bmd-label'],
-.operation .is-focused [class*=' bmd-label'],
-.operation .is-focused label {
-    color: #1976d2;
-}
-
-.operation .form-control {
-    background-color: transparent;
-    border-color: var(--primary-border-colour);
-    color: var(--primary-font-colour);
-}