Merge pull request #75 from ZHANGTIANYAO1/fix/ui-overflow-and-textarea-resize

fix(web): long artist + B站 card grid + B站 image referer
fix(web): set no-referrer at document level so B站 cover thumbnails load
2026-10-03 05:22:49 +08:00 · 2026-05-27 20:10:21 +08:00 · 2026-05-27 20:07:18 +08:00 · 2026-05-27 17:20:46 +08:00 · 2026-05-27 17:14:26 +08:00
3 changed files with 19 additions and 2 deletions
@@ -3,6 +3,10 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Bilibili / NetEase / QQ image CDNs reject requests whose Referer is not on their whitelist.
+       Setting no-referrer at the document level covers <img> tags AND CSS background-image fetches.
+       Our own /api/* CSRF check uses Origin (not Referer), so this doesn't break auth. -->
+  <meta name="referrer" content="no-referrer">
  <title>TSMusicBot</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap" rel="stylesheet">
@@ -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 {
@@ -379,6 +379,7 @@ onMounted(() => {

 .daily-card {
  cursor: pointer;
+  min-width: 0;
 }

 .daily-name {
Author	SHA1	Message	Date
TIANYAO ZHANG	3abb468cca	Merge pull request #75 from ZHANGTIANYAO1/fix/ui-overflow-and-textarea-resize fix(web): long artist + B站 card grid + B站 image referer	2026-05-27 20:10:21 +08:00
saopig1andClaude Opus 4.7	c8daa14219	fix(web): set no-referrer at document level so B站 cover thumbnails load 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 `<img>` 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 `<meta name="referrer" content="no-referrer">` in index.html applies no-referrer site-wide: covers <img> 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) <noreply@anthropic.com>	2026-05-27 20:07:18 +08:00
saopig1andClaude Opus 4.7	81cd8a2bec	fix(web): revert textarea + actual culprit was B站热门 card grid 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) <noreply@anthropic.com>	2026-05-27 17:20:46 +08:00
saopig1andClaude Opus 4.7	35210cf570	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>	2026-05-27 17:14:26 +08:00