ok

src/components/MusicPlayer.css

@@ -16,19 +16,22 @@
   top: 0;
   left: 0;
   right: 0;
-  height: 142px;
+  height: 120px;
   /* Adjust height as needed */
   background-size: cover;
   /* Adjust background image size */
   background-position: center;
   /* Center the background image */
-  filter: blur(1.5px);
-  -webkit-filter: blur(1.5px);
-  border-radius: 13px 13px 0 0;
+  /* filter: blur(1.5px);
+  -webkit-filter: blur(1.5px); */
+  /* border-radius: 13px 13px 0 0; */
   background-color: rgb(95 121 89);
   /* Rounded corners at the top */
   text-align: right;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+
+  border-radius: 0 0 15px 15px;
+  z-index: 1;
 }
 
 .current-name {
@@ -73,6 +76,8 @@
   font-size: 18px;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
   /* Text shadow for readability */
+  
+  margin-bottom: -47px;
 }
 
 .progress-container {
@@ -124,6 +129,17 @@
   /* Allow vertical scrolling */
 }
 
+.expandable-container > div:first-child {
+  padding-top: 21px;
+  
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+*/ }
+
 .expand-button {
   font-size: 20px;
   position: relative;
@@ -138,7 +154,21 @@
   text-align: center;
   line-height: 40px;
   /* Center text vertically */
-}
+
+  -webkit-tap-highlight-color: transparent;
+
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
+     -khtml-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+  outline: none;
+  
+  transition: padding-top 0.3s ease;
+  padding-top: 8px;
+  }
 
 .expand-button h5 {
   font-weight: 500;
@@ -146,8 +176,8 @@
   text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.36);
 }
 
-.expand-button:hover {
-  background-color: #73a585;
+.expand-button.expanded{
+  padding-top: 0px;
 }
 
 /* Adjust height of the music player container when expanded */
@@ -224,10 +254,6 @@
   /* Adjust fill color */
 }
 
-/* Add hover effect for the search icon */
-.search-box .search-icon:hover {
-  color: #555;
-}
 .rectangle {
   position: relative;
   height: 200px;