RIFFMASTER: FRONTEND: add fixed songList size and vertical stylish scrollbar

Backend/Spring/.idea/workspace.xml

@@ -10,16 +10,7 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="8315de53-8c15-472c-a710-45938463dc02" name="Changes" comment="RIFFMASTER: add frontend files">
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/10.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/10.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/11.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/11.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/5.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/5.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/7.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/7.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack.old" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack.old" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/Services/song.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/Services/song.service.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -58,26 +49,26 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "SHARE_PROJECT_CONFIGURATION_FILES": "true",
-    "WebServerToolWindowFactoryState": "false",
-    "last_opened_file_path": "C:/Users/Kuba/Desktop/studia/WPFt/inne/oslo_boating_project-master/oslo_boating_project/boat-reservation-logic",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "project.structure.last.edited": "Artifacts",
-    "project.structure.proportion": "0.15",
-    "project.structure.side.proportion": "0.2",
-    "settings.editor.selected.configurable": "reference.settings.project.maven.repository.indices",
-    "spring.configuration.checksum": "38008dd81c2f4d7985ecf6e0ce8af1d1",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/Kuba/Desktop/studia/WPFt/inne/oslo_boating_project-master/oslo_boating_project/boat-reservation-logic&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;project.structure.last.edited&quot;: &quot;Artifacts&quot;,
+    &quot;project.structure.proportion&quot;: &quot;0.15&quot;,
+    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;reference.settings.project.maven.repository.indices&quot;,
+    &quot;spring.configuration.checksum&quot;: &quot;38008dd81c2f4d7985ecf6e0ce8af1d1&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
       <recent name="C:\Users\Kuba\Desktop\studia\WPFt\RiffMaster web application\Backend\Spring\src\main\java\pl\dmcs\jwoszczyk\RiffMaster" />
@@ -224,7 +215,9 @@
       <workItem from="1686898654444" duration="1889000" />
       <workItem from="1686909268841" duration="15817000" />
       <workItem from="1686937489475" duration="803000" />
-      <workItem from="1686986592460" duration="4442000" />
+      <workItem from="1686986592460" duration="4445000" />
+      <workItem from="1687000973157" duration="670000" />
+      <workItem from="1687006511411" duration="599000" />
     </task>
     <task id="LOCAL-00001" summary="add basic hello world and transfering data to server">
       <created>1679575346987</created>

Frontend/RiffMasterFront/.idea/workspace.xml

@@ -6,8 +6,6 @@
   <component name="ChangeListManager">
     <list default="true" id="d91bc08d-d968-4797-8fb3-ef602a37db2a" name="Changes" comment="RIFFMASTER: add frontend business logic (riff, song)">
       <change beforePath="$PROJECT_DIR$/../../Backend/Spring/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/configuration/SecurityConfiguration.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/configuration/SecurityConfiguration.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/SongController.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/SongController.java" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -101,7 +99,8 @@
       <workItem from="1686898660229" duration="4682000" />
       <workItem from="1686909264196" duration="8471000" />
       <workItem from="1686937499471" duration="1137000" />
-      <workItem from="1686989529474" duration="3329000" />
+      <workItem from="1686989529474" duration="3659000" />
+      <workItem from="1687006518226" duration="869000" />
     </task>
     <task id="LOCAL-00001" summary="RIFFMASTER: add frontend project">
       <created>1685976235580</created>

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

@@ -80,7 +80,10 @@ body {
 }
 
 .song-list {
-  overflow: hidden;
+  height: 300px;
+  max-height: 300px; /* Set the maximum height for the list */
+  overflow-y: auto; /* Enable vertical scrollbar if content exceeds the maximum height */
+
 }
 
 .file-input {
@@ -106,3 +109,20 @@ body {
   height: 20px;
   border: 1px solid #ccc;
 }
+
+/* Styling for the scrollbar */
+.song-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.song-list::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+.song-list::-webkit-scrollbar-thumb {
+  background-color: #888;
+}
+
+.song-list::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+}