Ticket #4980 - Studio: Forms/options layout fixes. (#5841)

studio/template/css/options.css

@@ -4,17 +4,20 @@ div.bx-stg-cells {
 }
 div.bx-stg-cells div.bx-sc-cell {
     position: relative;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
     flex: 1 1 auto;
 }
 div.bx-stg-cells div.bx-sc-cell .bx-btn {
-    display: inline-flex; /* keeps the 32px Studio button's centred label */
-    float: none;
-    vertical-align: middle;
+    margin: 0.25rem;
+    white-space: nowrap;
 }
 
 /*-- Manage --*/
 div.bx-stg-manage div.bx-sc-cell.bx-sc-right {
-    text-align: right;
+    margin: -0.25rem;
+    justify-content: flex-end;
 }
 
 /*-- Mixes --*/
@@ -24,7 +27,8 @@ div.bx-stg-mixes div.bx-sc-cell.bx-sc-select {
 div.bx-stg-mixes div.bx-sc-cell.bx-sc-new {
     width: 50%;
 
-    text-align: right;
+    margin: -0.25rem;
+    justify-content: flex-end;
 }
 div.bx-stg-mixes div.bx-sc-cell select {
     width: auto;

studio/template/options.html

@@ -8,7 +8,7 @@
     });
 </script>
 <bx_if:show_manage>
-    <div class="bx-stg-cells bx-stg-manage bx-def-margin-bottom">
+    <div class="bx-stg-cells bx-stg-manage px-4 py-2">
         <div class="bx-sc-cell bx-sc-left">&nbsp</div>
         <div class="bx-sc-cell bx-sc-right">
             <a class="bx-btn" href="javascript:void(0)" onclick="javascript: __js_object__.import(this)">
@@ -21,7 +21,7 @@
     </div>
 </bx_if:show_manage>
 <bx_if:show_mixes>
-    <div class="bx-stg-cells bx-stg-mixes bx-def-margin-bottom bx-clearfix">
+    <div class="bx-stg-cells bx-stg-mixes px-4 py-2 bx-clearfix">
         <div class="bx-sc-cell bx-sc-select">
             <div class="bx-form-input-wrapper bx-form-input-wrapper-select">
                 <bx_if:show_select_mix>

template/css/tailwind.css

@@ -977,6 +977,7 @@
     .bx-std .bx-form-input-datetime,
     .bx-std .bx-form-input-text,
     .bx-std .bx-form-input-price,
+    .bx-std .bx-form-input-wrapper-price span,
     .bx-std .bx-form-input-wrapper-password {
         @apply h-8 py-0 leading-5;
     }