From 35210cf570960562678f4fcddfcef5c69fa0411b Mon Sep 17 00:00:00 2001
From: saopig1 <4x7sw862st@gmail.com>
Date: Wed, 27 May 2026 17:14:26 +0800
Subject: [PATCH] fix(web): long artist name overflow + textarea resize
 artifact

- Player.vue: wrap artist text in a span with ellipsis. The previous
  text node sat directly inside the flex `.song-artist` container with
  no overflow handling, so a long author name expanded the container
  past its 240px parent and broke the bottom Player bar layout. Also
  add `min-width: 0 + overflow: hidden` to `.song-info` and
  `.song-artist`, and a `:title` attribute for the full text on hover.

- Settings.vue: change `resize: vertical` on the cookie textareas
  to `resize: none`. The browser's resize grip rendered as a stray
  black triangle at the bottom-right corner in dark theme, and
  dragging it caused visual artifacts on the right edge. The
  textareas keep their `rows="3"` default height.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/src/components/Player.vue | 16 ++++++++++++++--
 web/src/views/Settings.vue    |  2 +-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/src/components/Player.vue b/web/src/components/Player.vue
index 7f4b836..e5669c7 100644
--- a/web/src/components/Player.vue
+++ b/web/src/components/Player.vue
@@ -27,10 +27,10 @@
       <div class="player-left" @click="toggleLyrics">
         <CoverArt :url="currentSong.coverUrl" :size="40" />
         <div class="song-info">
-          <div class="song-name">{{ currentSong.name }}</div>
+          <div class="song-name" :title="currentSong.name">{{ currentSong.name }}</div>
           <div class="song-artist">
             <span v-if="showBotBadge" class="bot-badge">{{ activeBot?.name }}</span>
-            {{ currentSong.artist }}
+            <span class="artist-name" :title="currentSong.artist">{{ currentSong.artist }}</span>
           </div>
         </div>
       </div>
@@ -310,6 +310,8 @@ function cycleMode() {
 
 .song-info {
   min-width: 0;
+  flex: 1;
+  overflow: hidden;
 }
 
 .song-name {
@@ -326,6 +328,16 @@ function cycleMode() {
   display: flex;
   align-items: center;
   gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.artist-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1;
 }
 
 .bot-badge {
diff --git a/web/src/views/Settings.vue b/web/src/views/Settings.vue
index 863c267..290a0c7 100755
--- a/web/src/views/Settings.vue
+++ b/web/src/views/Settings.vue
@@ -1483,7 +1483,7 @@ onUnmounted(() => {
   font-family: inherit;
   font-size: 13px;
   outline: none;
-  resize: vertical;
+  resize: none;
   &:focus { border-color: var(--color-primary); }
 }