From 43ac1e29ab3d527d9f65b49ff47ae909137dde3b Mon Sep 17 00:00:00 2001 From: Cyber Preacher <72062250+Cyber-preacher@users.noreply.github.com> Date: Wed, 24 Jun 2026 15:24:21 +0400 Subject: [PATCH 1/3] Keep record source pills readable --- src/components/Chip.tsx | 4 ++-- src/components/GlassyRecordCard.css | 32 +++++++++++++++-------------- src/components/StageChip.css | 2 -- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index 1660602..09d8b88 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -16,11 +16,11 @@ export function Chip({ children, className, title }: ChipProps) { - + {children} diff --git a/src/components/GlassyRecordCard.css b/src/components/GlassyRecordCard.css index de247ca..bb733dd 100644 --- a/src/components/GlassyRecordCard.css +++ b/src/components/GlassyRecordCard.css @@ -87,7 +87,7 @@ .glassy-record-card__button { display: grid; width: 100%; - grid-template-columns: minmax(0, 1fr) minmax(28rem, 31rem); + grid-template-columns: minmax(12rem, 1fr) auto; gap: 1rem; border: 0; background: transparent; @@ -116,10 +116,7 @@ } .glassy-record-card__aside { - display: grid; - grid-template-columns: - minmax(0, 10rem) minmax(0, 8.75rem) minmax(0, 7.75rem) - 1.25rem; + display: flex; align-items: center; justify-content: end; gap: 0.65rem; @@ -130,14 +127,19 @@ } .glassy-record-card__metaPill { + flex: 0 1 auto; + max-width: min(34rem, 52vw); min-width: 0; - width: 100%; justify-content: center; color: var(--record-meta-text); background: var(--record-meta-bg); white-space: nowrap; } +.glassy-record-card__metaPill > span { + white-space: normal; +} + .glassy-record-card__title { min-width: 0; color: var(--text); @@ -160,16 +162,13 @@ } .glassy-record-card__stage { - min-width: 0; - width: 100%; + flex: 0 0 auto; justify-content: center; white-space: nowrap; } .glassy-record-card__time { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; + flex: 0 0 auto; color: var(--record-time-text); font-size: 0.72rem; white-space: nowrap; @@ -192,19 +191,22 @@ padding: 0 1rem 1rem 0; } -@media (max-width: 760px) { +@media (max-width: 980px) { .glassy-record-card__button { grid-template-columns: 1fr; gap: 0.75rem; } .glassy-record-card__aside { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 1.25rem; - justify-content: stretch; + flex-wrap: wrap; + justify-content: flex-start; + } + + .glassy-record-card__metaPill { + max-width: 100%; } .glassy-record-card__time { - grid-column: 1 / 3; white-space: normal; text-align: left; } diff --git a/src/components/StageChip.css b/src/components/StageChip.css index 6526608..83c0d5a 100644 --- a/src/components/StageChip.css +++ b/src/components/StageChip.css @@ -11,9 +11,7 @@ .stage-chip .hint-underline { min-width: 0; max-width: 100%; - overflow: hidden; color: inherit; - text-overflow: ellipsis; white-space: nowrap; } From b3ee61dfbc34e3c2a109d0a60e44fc959af85ea9 Mon Sep 17 00:00:00 2001 From: Cyber Preacher <72062250+Cyber-preacher@users.noreply.github.com> Date: Thu, 25 Jun 2026 17:03:34 +0400 Subject: [PATCH 2/3] Align record card source and stage pills --- src/components/GlassyRecordCard.css | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/GlassyRecordCard.css b/src/components/GlassyRecordCard.css index bb733dd..8380cda 100644 --- a/src/components/GlassyRecordCard.css +++ b/src/components/GlassyRecordCard.css @@ -87,7 +87,7 @@ .glassy-record-card__button { display: grid; width: 100%; - grid-template-columns: minmax(12rem, 1fr) auto; + grid-template-columns: minmax(10rem, 1fr) minmax(36rem, 42rem); gap: 1rem; border: 0; background: transparent; @@ -116,7 +116,11 @@ } .glassy-record-card__aside { - display: flex; + display: grid; + grid-template-columns: minmax(15rem, 1fr) minmax( + 8.75rem, + 9.5rem + ) 7.75rem 1.25rem; align-items: center; justify-content: end; gap: 0.65rem; @@ -127,8 +131,7 @@ } .glassy-record-card__metaPill { - flex: 0 1 auto; - max-width: min(34rem, 52vw); + width: 100%; min-width: 0; justify-content: center; color: var(--record-meta-text); @@ -162,13 +165,14 @@ } .glassy-record-card__stage { - flex: 0 0 auto; + width: 100%; + min-width: 0; justify-content: center; white-space: nowrap; } .glassy-record-card__time { - flex: 0 0 auto; + min-width: 0; color: var(--record-time-text); font-size: 0.72rem; white-space: nowrap; @@ -191,13 +195,14 @@ padding: 0 1rem 1rem 0; } -@media (max-width: 980px) { +@media (max-width: 1180px) { .glassy-record-card__button { grid-template-columns: 1fr; gap: 0.75rem; } .glassy-record-card__aside { + display: flex; flex-wrap: wrap; justify-content: flex-start; } From 68068fc06e4ba1235b0287549171993dad04ee11 Mon Sep 17 00:00:00 2001 From: Cyber Preacher <72062250+Cyber-preacher@users.noreply.github.com> Date: Thu, 25 Jun 2026 18:48:24 +0400 Subject: [PATCH 3/3] Format record card CSS --- src/components/GlassyRecordCard.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/GlassyRecordCard.css b/src/components/GlassyRecordCard.css index 8380cda..90e0a5a 100644 --- a/src/components/GlassyRecordCard.css +++ b/src/components/GlassyRecordCard.css @@ -117,10 +117,9 @@ .glassy-record-card__aside { display: grid; - grid-template-columns: minmax(15rem, 1fr) minmax( - 8.75rem, - 9.5rem - ) 7.75rem 1.25rem; + grid-template-columns: + minmax(15rem, 1fr) minmax(8.75rem, 9.5rem) + 7.75rem 1.25rem; align-items: center; justify-content: end; gap: 0.65rem;