Improve help popup button to work in disabled fieldsets

ui-ngx/src/app/shared/components/help-popup.component.html

@@ -15,28 +15,33 @@
     limitations under the License.
 
 -->
-<button #toggleHelpButton
+<fieldset class="tb-help-popup-button-container">
-        *ngIf="!textMode"
+  <div #toggleHelpButton
-        mat-icon-button
+       [fxShow]="!textMode"
-        color="primary"
+       matTooltip="{{'help.show-help' | translate}}"
-        class="tb-help-popup-button tb-mat-32"
+       matTooltipPosition="above"
-        type="button"
+       style="border-radius: 50%"
-        (click)="toggleHelp()"
+       (click)="toggleHelp()">
-        matTooltip="{{'help.show-help' | translate}}"
+    <button mat-icon-button
-        matTooltipPosition="above">
+            color="primary"
-  <mat-icon class="material-icons">{{popoverVisible ? 'help' : 'help_outline'}}</mat-icon>
+            class="tb-help-popup-button tb-mat-32"
-  <mat-spinner *ngIf="popoverVisible && !popoverReady" class="tb-help-popup-button-loading" mode="indeterminate" diameter="20" strokeWidth="2"></mat-spinner>
+            type="button">
-</button>
+      <mat-icon class="material-icons">{{popoverVisible ? 'help' : 'help_outline'}}</mat-icon>
-<button #toggleHelpTextButton
+      <mat-spinner *ngIf="popoverVisible && !popoverReady" class="tb-help-popup-button-loading" mode="indeterminate" diameter="20" strokeWidth="2"></mat-spinner>
-        *ngIf="textMode"
+    </button>
-        mat-button
+  </div>
-        color="primary"
+  <div #toggleHelpTextButton
-        class="tb-help-popup-text-button"
+       [fxShow]="textMode"
-        [ngClass]="{'mat-stroked-button': popoverVisible && popoverReady}"
+       (click)="toggleHelp()">
-        (click)="toggleHelp()">
+    <button mat-button
-  <ng-container *ngIf="triggerSafeHtml">
+            color="primary"
-    <span [style]="triggerStyle" [innerHTML]="triggerSafeHtml"></span>
+            class="tb-help-popup-text-button"
-  </ng-container>
+            [ngClass]="{'mat-stroked-button': popoverVisible && popoverReady}">
-  <mat-icon *ngIf="!popoverVisible || popoverReady" class="tb-mat-16">open_in_new</mat-icon>
+      <ng-container *ngIf="triggerSafeHtml">
-  <mat-spinner *ngIf="popoverVisible && !popoverReady" mode="indeterminate" diameter="16" strokeWidth="2"></mat-spinner>
+        <span [style]="triggerStyle" [innerHTML]="triggerSafeHtml"></span>
-</button>
+      </ng-container>
+      <mat-icon *ngIf="!popoverVisible || popoverReady" class="tb-mat-16">open_in_new</mat-icon>
+      <mat-spinner *ngIf="popoverVisible && !popoverReady" mode="indeterminate" diameter="16" strokeWidth="2"></mat-spinner>
+    </button>
+  </div>
+</fieldset>

ui-ngx/src/app/shared/components/help-popup.component.scss

@@ -13,6 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+.tb-help-popup-button-container {
+  width: initial;
+  display: inline-block;
+  vertical-align: middle;
+}
+
 .tb-help-popup-button {
   position: relative;
   .mat-progress-spinner {