use icon button

projects/nshmp-template/src/lib/components/content-container/content-container.component.html

@@ -10,18 +10,20 @@
     <div class="container panel-control">
       <div class="spacer"></div>
 
-      <button
-        mat-icon-button
-        class="control"
-        [ngClass]="{'touch-target-20': nshmpService.isSmallScreen$ | async}"
-        (click)="headerService.toggleControlPanel()"
-      >
-        @if (headerService.controlPanelSelected()) {
+      @if (headerService.controlPanelSelected()) {
+        <button
+          mat-icon-button
+          class="control"
+          [ngClass]="{'touch-target-20': nshmpService.isSmallScreen$ | async}"
+          (click)="headerService.toggleControlPanel()"
+        >
           <mat-icon matTooltip="Close control panel"> left_panel_close </mat-icon>
-        } @else {
+        </button>
+      } @else {
+        <button mat-icon-button class="control" (click)="headerService.toggleControlPanel()">
           <mat-icon matTooltip="Open control panel"> left_panel_open </mat-icon>
-        }
-      </button>
+        </button>
+      }
     </div>
 
     @if (headerService.controlPanelSelected()) {
@@ -50,18 +52,20 @@
       }"
     >
       <div class="panel-control">
-        <button
-          mat-icon-button
-          class="control"
-          [ngClass]="{'touch-target-20': nshmpService.isSmallScreen$ | async}"
-          (click)="headerService.toggleSettingsPanel()"
-        >
-          @if (headerService.settingsSelected()) {
+        @if (headerService.settingsSelected()) {
+          <button
+            mat-icon-button
+            class="control"
+            [ngClass]="{'touch-target-20': nshmpService.isSmallScreen$ | async}"
+            (click)="headerService.toggleSettingsPanel()"
+          >
             <mat-icon matTooltip="Close plot settings panel"> right_panel_close </mat-icon>
-          } @else {
+          </button>
+        } @else {
+          <button mat-icon-button class="control" (click)="headerService.toggleSettingsPanel()">
             <mat-icon matTooltip="Open plot settings panel"> right_panel_open </mat-icon>
-          }
-        </button>
+          </button>
+        }
       </div>
 
       @if (headerService.settingsSelected()) {