Removable footer, compact styling for particle creator

frontend/src/app/pages/particles/components/frames/frames.component.html

@@ -1,12 +1,27 @@
 <div class="card-div">
   <mat-card>
-    <mat-card-header>
-      <mat-card-title>Frames</mat-card-title>
+    <mat-card-header class="frame-header-fullwidth">
+      <div class="frame-header-row" mat-card-title>
+        <span class="frame-title-text">Frames</span>
+        <div>
+          <ng-content></ng-content>
+          <button mat-icon-button color="warn" (click)="removeFrame(currentFrame)"
+                  matTooltip="Delete {{currentFrame}}"
+                  [disabled]="frames.length <= 1">
+            <mat-icon [class.can-delete]="frames.length > 1" [class.can-not-delete]="frames.length <= 1">
+              delete
+            </mat-icon>
+          </button>
+          <button mat-icon-button (click)="addFrame()" matTooltip="Add Frame">
+            <mat-icon class="add-button">add</mat-icon>
+          </button>
+        </div>
+      </div>
     </mat-card-header>
     <mat-card-content>
       <div class="frames-container">
         <mat-tab-group [selectedIndex]="frames.indexOf(currentFrame)"
-          (selectedIndexChange)="switchFrame(frames[$event])">
+                       (selectedIndexChange)="switchFrame(frames[$event])">
           @for (frameId of frames; track frameId) {
             <mat-tab [label]="frameId">
               <div class="frame-content">
@@ -33,21 +48,10 @@
                     </div>
                   }
                 </div>
-                <div class="frame-actions">
-                  <button mat-raised-button color="warn" (click)="removeFrame(frameId)"
-                    [disabled]="frames.length <= 1">
-                    Remove Frame
-                  </button>
-                </div>
               </div>
             </mat-tab>
           }
         </mat-tab-group>
-        <div class="add-frame">
-          <button mat-raised-button color="primary" (click)="addFrame()">
-            Add New Frame
-          </button>
-        </div>
       </div>
     </mat-card-content>
   </mat-card>