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..90e0a5a 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(10rem, 1fr) minmax(36rem, 42rem); gap: 1rem; border: 0; background: transparent; @@ -118,8 +118,8 @@ .glassy-record-card__aside { display: grid; grid-template-columns: - minmax(0, 10rem) minmax(0, 8.75rem) minmax(0, 7.75rem) - 1.25rem; + minmax(15rem, 1fr) minmax(8.75rem, 9.5rem) + 7.75rem 1.25rem; align-items: center; justify-content: end; gap: 0.65rem; @@ -130,14 +130,18 @@ } .glassy-record-card__metaPill { - min-width: 0; width: 100%; + min-width: 0; 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 +164,14 @@ } .glassy-record-card__stage { - min-width: 0; width: 100%; + min-width: 0; justify-content: center; white-space: nowrap; } .glassy-record-card__time { min-width: 0; - overflow: hidden; - text-overflow: ellipsis; color: var(--record-time-text); font-size: 0.72rem; white-space: nowrap; @@ -192,19 +194,23 @@ padding: 0 1rem 1rem 0; } -@media (max-width: 760px) { +@media (max-width: 1180px) { .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; + display: flex; + 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; }