RIFFMASTER: minor layout changes to mainpage

Frontend/RiffMasterFront/.idea/workspace.xml

@@ -83,7 +83,7 @@
       <workItem from="1686320426184" duration="4172000" />
       <workItem from="1686487159086" duration="10000" />
       <workItem from="1686487225522" duration="522000" />
-      <workItem from="1686571863797" duration="3674000" />
+      <workItem from="1686571863797" duration="4325000" />
     </task>
     <task id="LOCAL-00001" summary="RIFFMASTER: add frontend project">
       <created>1685976235580</created>

Frontend/RiffMasterFront/src/app/main-page/main-page.component.css

@@ -63,4 +63,5 @@ body {
 .song-list {
   flex: 1;
   overflow-y: auto;
+  align-items: stretch;
 }

Frontend/RiffMasterFront/src/app/main-page/main-page.component.html

@@ -1,18 +1,24 @@
 <!-- app.component.html -->
 
 <div class="container">
+  <!-- ----------------------------------------------------------------------------------------------------col1 -->
   <div class="margin-column"></div> <!-- First margin column -->
-
+  <!-- ----------------------------------------------------------------------------------------------------col2 -->
   <div class="col-left">
+
     <mat-card class="song-list-card">
+
       <mat-card-header>
         <mat-card-title>Song List</mat-card-title>
       </mat-card-header>
+
       <mat-card-content>
+
         <mat-form-field appearance="fill">
           <mat-label>Search songs</mat-label>
           <input matInput type="text" placeholder="Search songs" [(ngModel)]="searchQuery">
         </mat-form-field>
+
         <div class="song-list">
           <mat-list>
             <mat-list-item *ngFor="let song of filteredSongs" (click)="displaySongInformation(song)">
@@ -20,10 +26,14 @@
             </mat-list-item>
           </mat-list>
         </div>
+
       </mat-card-content>
+
     </mat-card>
+
   </div>
 
+  <!-- ----------------------------------------------------------------------------------------------------col3 -->
 
   <div class="col-right">
     <div class="buttons-container">
@@ -58,5 +68,7 @@
     </div>
   </div>
 
+  <!-- ----------------------------------------------------------------------------------------------------col4 -->
   <div class="margin-column"></div> <!-- Second margin column -->
+
 </div>