Merge pull request #461 from pwm-project/pwm-bugs

Fixed a problem where the button on the token validation dialog was r…

client/src/modules/helpdesk/verifications-dialog.component.scss

@@ -4,13 +4,12 @@
 }
 
 .token-destination-submitter {
-    display: grid;
-    grid-template-columns: max-content max-content max-content;
-    grid-column-gap: 10px;
-    grid-row-gap: 5px;
+    display: flex;
+    flex-wrap: wrap;
     align-items: center;
 
-    select {
-        grid-column-start: 1;
+    > * {
+        margin-right: 10px !important;
+        margin-top: 4px !important;
     }
 }

client/src/modules/helpdesk/verifications-dialog.template.html

@@ -48,7 +48,7 @@
                 </ias-button>
             </div>
 
-            <div class="ias-dialog-container" ng-switch-when="verify">
+            <div class="ias-dialog-container grow-with-content" ng-switch-when="verify">
                 <div class="ias-dialog-label">
                     <div class="ias-title" ng-bind="'Title_ValidateCode' | translate"></div>
                 </div>
@@ -66,9 +66,8 @@
                             </div>
                         </div>
                         <div ng-switch-when="TOKEN" ng-switch-when-separator="|">
+                            <label ng-bind="'Display_TokenDestination' | translate"></label>
                             <div class="ias-input-container token-destination-submitter">
-                                <label ng-bind="'Display_TokenDestination' | translate"></label>
-
                                 <select id="verification-token-destination" ng-model="$ctrl.tokenDestinationID"
                                         ng-change="$ctrl.onTokenDestinationChanged()">
                                     <option ng-repeat="tokenDestination in $ctrl.verificationOptions.tokenDestinations"
@@ -78,7 +77,8 @@
                                     </option>
                                 </select>
                                 <ias-button ng-click="$ctrl.sendVerificationTokenToDestination()"
-                                            ng-disabled="$ctrl.sendingVerificationToken">
+                                            ng-disabled="$ctrl.sendingVerificationToken"
+                                            title="{{ 'Button_SendToken' | translate }}">
                                     {{ 'Button_SendToken' | translate }}
                                 </ias-button>
                                 <div class="loading-gif-25" ng-if="$ctrl.sendingVerificationToken"></div>

client/src/styles.scss

@@ -7,9 +7,19 @@
     // Need to fix this minor css problem in ux-ias until a version > 1.0.0-rc comes out.
     position: fixed;
 
-    > .ias-dialog-container > .ias-dialog-label > .ias-title {
-      overflow: hidden;
-      text-overflow: ellipsis;
+    > .ias-dialog-container {
+      &.grow-with-content {
+        @media (min-width: 768px) {
+          max-width: 100%;
+          min-width: 375px;
+          width: max-content;
+        }
+      }
+
+      > .ias-dialog-label > .ias-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }