From 4a5d5dcaf0714c17252684e18870b4a1057ec976 Mon Sep 17 00:00:00 2001
From: Sora <8521327+SoraKasvgano@users.noreply.github.com>
Date: Tue, 20 Jan 2026 12:04:46 +0800
Subject: [PATCH] Update EmbedCodeField.jsx

---
 ui/src/share/EmbedCodeField.jsx | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/ui/src/share/EmbedCodeField.jsx b/ui/src/share/EmbedCodeField.jsx
index 8b3cfb485..4e349ebbb 100644
--- a/ui/src/share/EmbedCodeField.jsx
+++ b/ui/src/share/EmbedCodeField.jsx
@@ -84,7 +84,7 @@ export const EmbedCodeField = ({ url, title = 'Music Player' }) => {
 <div id="navidrome-floating-player">
   <div id="nav-player-container" class="nav-collapsed">
     <div id="nav-player-toggle" onclick="toggleNavPlayer()">
-      <span id="nav-toggle-icon">🎵</span>
+      <span id="nav-toggle-icon">♪</span>
     </div>
     <div id="nav-player-content">
       <iframe src="${url}" frameborder="0" allowfullscreen></iframe>
@@ -107,6 +107,8 @@ export const EmbedCodeField = ({ url, title = 'Music Player' }) => {
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
   overflow: hidden;
   transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
 }
 
 #nav-player-container.nav-collapsed {
@@ -122,13 +124,22 @@ export const EmbedCodeField = ({ url, title = 'Music Player' }) => {
 #nav-player-toggle {
   width: 60px;
   height: 60px;
+  min-height: 60px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border-radius: 12px;
   transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+#nav-player-container.nav-expanded #nav-player-toggle {
+  border-radius: 12px 12px 0 0;
+}
+
+#nav-player-container.nav-collapsed #nav-player-toggle {
+  border-radius: 12px;
 }
 
 #nav-player-toggle:hover {
@@ -138,17 +149,20 @@ export const EmbedCodeField = ({ url, title = 'Music Player' }) => {
 
 #nav-toggle-icon {
   font-size: 28px;
+  color: white;
   transition: transform 0.3s ease;
+  user-select: none;
 }
 
 #nav-player-container.nav-expanded #nav-toggle-icon {
-  transform: rotate(90deg);
+  transform: rotate(180deg);
 }
 
 #nav-player-content {
   display: none;
-  width: 380px;
-  height: 460px;
+  width: 100%;
+  flex: 1;
+  overflow: hidden;
 }
 
 #nav-player-container.nav-expanded #nav-player-content {
@@ -159,6 +173,7 @@ export const EmbedCodeField = ({ url, title = 'Music Player' }) => {
   width: 100%;
   height: 100%;
   border: none;
+  display: block;
 }
 
 /* 移动端适配 */
@@ -173,10 +188,6 @@ export const EmbedCodeField = ({ url, title = 'Music Player' }) => {
     height: 480px;
     max-width: 380px;
   }
-
-  #nav-player-content {
-    width: 100%;
-  }
 }
 </style>