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 1/3] 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) --- 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 @@
-
{{ currentSong.name }}
+
{{ currentSong.name }}
{{ activeBot?.name }} - {{ currentSong.artist }} + {{ currentSong.artist }}
@@ -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); } } From 81cd8a2bece216fbb1e784b9463500980042d887 Mon Sep 17 00:00:00 2001 From: saopig1 <4x7sw862st@gmail.com> Date: Wed, 27 May 2026 17:20:46 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix(web):=20revert=20textarea=20+=20actual?= =?UTF-8?q?=20culprit=20was=20B=E7=AB=99=E7=83=AD=E9=97=A8=20card=20grid?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previous commit misidentified the second bug. Reverting the Settings.vue `resize: vertical` → `resize: none` change — that wasn't the issue. Real fix: `.daily-card` (used by B站热门 and 每日推荐 sections in Home.vue) is a CSS Grid cell with default `min-width: auto`, which refuses to shrink below its content. A long Bilibili video title inside `.daily-name` expanded the cell past its 1fr column, breaking the 6-column grid and creating empty/black space on the right. The existing `text-overflow: ellipsis` on `.daily-name` couldn't engage. Adding `min-width: 0` to `.daily-card` lets the cell shrink to the 1fr grid track size, and the ellipsis truncation now works. Co-Authored-By: Claude Opus 4.7 (1M context) --- web/src/views/Home.vue | 1 + web/src/views/Settings.vue | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue index c7d64ed..bb32d84 100644 --- a/web/src/views/Home.vue +++ b/web/src/views/Home.vue @@ -379,6 +379,7 @@ onMounted(() => { .daily-card { cursor: pointer; + min-width: 0; } .daily-name { diff --git a/web/src/views/Settings.vue b/web/src/views/Settings.vue index 290a0c7..863c267 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: none; + resize: vertical; &:focus { border-color: var(--color-primary); } } From c8daa1421960a1bd37d2e87684a20b308f544105 Mon Sep 17 00:00:00 2001 From: saopig1 <4x7sw862st@gmail.com> Date: Wed, 27 May 2026 20:07:18 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix(web):=20set=20no-referrer=20at=20docume?= =?UTF-8?q?nt=20level=20so=20B=E7=AB=99=20cover=20thumbnails=20load?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bilibili's CDN (i*.hdslb.com) returns 403 with `x-error-info: RefererWhite` for image requests whose Referer is not on their whitelist. `CoverArt.vue` already sets `referrerpolicy="no-referrer"` on its `` tag, BUT the `.cover-shadow` div renders the same URL as a CSS `background-image`, which ignores the img attribute and uses the document default policy (`strict-origin-when-cross-origin` in modern Firefox/Chrome) — that sends `Referer: http://localhost:3000/` and triggers the block. Setting `` in index.html applies no-referrer site-wide: covers tags, CSS background-image fetches, and anywhere else CDNs check referer. Doesn't affect our /api/* CSRF middleware because that uses Origin (still sent by the browser), not Referer. Co-Authored-By: Claude Opus 4.7 (1M context) --- web/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web/index.html b/web/index.html index 8ae625d..bf7535c 100644 --- a/web/index.html +++ b/web/index.html @@ -3,6 +3,10 @@ + + TSMusicBot