From 757ac3e892dfc84678460d816b9d7dcbfc6e549b Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Mon, 21 Jun 2021 23:55:52 -0700
Subject: [PATCH] msgtplui - Cleanup styling on cycling widgets

---
 ext/msgtplui/ang/msgtplui/Preview.html | 38 ++++++++++++++++++--------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/ext/msgtplui/ang/msgtplui/Preview.html b/ext/msgtplui/ang/msgtplui/Preview.html
index 28744d39fc..2d824d7852 100644
--- a/ext/msgtplui/ang/msgtplui/Preview.html
+++ b/ext/msgtplui/ang/msgtplui/Preview.html
@@ -23,22 +23,36 @@
     <div class="well-sm">
       <div class="form-horizontal">
         <div class="form-group">
-          <label class="control-label">{{::ts('Variant')}}</label>
-          <select class="form-control" ng-options="item.id as item.label for item in model.revisions" ng-model="model.revisionId"></select>
-          <button class="btn btn-default" ng-click="model.cycle('revisionId', 'revisions', -1)">&#xab;</button>
-          <button class="btn btn-default" ng-click="model.cycle('revisionId', 'revisions', +1)">&#xbb;</button>
+          <label class="control-label col-sm-2">{{::ts('Revision')}}</label>
+          <div class="input-group col-sm-9">
+            <select class="form-control" ng-options="item.id as item.label for item in model.revisions" ng-model="model.revisionId"></select>
+            <div class="input-group-btn">
+              <button class="btn btn-default" ng-click="model.cycle('revisionId', 'revisions', -1)">&#xab;</button>
+              <button class="btn btn-default" ng-click="model.cycle('revisionId', 'revisions', +1)">&#xbb;</button>
+            </div>
+          </div>
         </div>
+
         <div class="form-group">
-          <label class="control-label">{{::ts('Example')}}</label>
-          <select class="form-control" ng-options="item.id as item.label for item in model.examples" ng-model="model.exampleId"></select>
-          <button class="btn btn-default" ng-click="model.cycle('exampleId', 'examples', -1)">&#xab;</button>
-          <button class="btn btn-default" ng-click="model.cycle('exampleId', 'examples', +1)">&#xbb;</button>
+          <label class="control-label col-sm-2">{{::ts('Example')}}</label>
+          <div class="input-group col-sm-9">
+            <select class="form-control" ng-options="item.id as item.label for item in model.examples" ng-model="model.exampleId"></select>
+            <div class="input-group-btn">
+              <button class="btn btn-default" ng-click="model.cycle('exampleId', 'examples', -1)">&#xab;</button>
+              <button class="btn btn-default" ng-click="model.cycle('exampleId', 'examples', +1)">&#xbb;</button>
+            </div>
+          </div>
         </div>
+
         <div class="form-group">
-          <label class="control-label">{{::ts('Format')}}</label>
-          <select class="form-control" ng-options="item.id as item.label for item in model.formats" ng-model="model.formatId"></select>
-          <button class="btn btn-default" ng-click="model.cycle('formatId', 'formats', -1)">&#xab;</button>
-          <button class="btn btn-default" ng-click="model.cycle('formatId', 'formats', +1)">&#xbb;</button>
+          <label class="control-label col-sm-2">{{::ts('Format')}}</label>
+          <div class="input-group col-sm-9">
+            <select class="form-control" ng-options="item.id as item.label for item in model.formats" ng-model="model.formatId"></select>
+            <div class="input-group-btn">
+              <button class="btn btn-default" ng-click="model.cycle('formatId', 'formats', -1)">&#xab;</button>
+              <button class="btn btn-default" ng-click="model.cycle('formatId', 'formats', +1)">&#xbb;</button>
+            </div>
+          </div>
         </div>
       </div>
 
-- 
2.25.1