fix: increase card image height, fix title overflow, fix Twitch error 2000

- CourseCard: raise image from h-40 to h-52 (less cropping)
- CourseCard: use -webkit-line-clamp inline style to hard-clip title overflow
- CourseCard: reduce footer bottom padding (pb-1)
- StreamEmbed: pass both current hostname and localhost as Twitch parent
  params to fix error 2000 in local/dev environments

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-16 06:59:34 +03:00
parent 4d80c84775
commit a26f02065a
2 changed files with 12 additions and 6 deletions

View File

@@ -6,7 +6,7 @@
> >
<!-- Cover image / gradient --> <!-- Cover image / gradient -->
<div <div
class="relative w-full h-40 bg-cover bg-center bg-no-repeat flex-shrink-0" class="relative w-full h-52 bg-cover bg-center bg-no-repeat flex-shrink-0"
:style=" :style="
course.image course.image
? { backgroundImage: `url('${encodeURI(course.image)}')` } ? { backgroundImage: `url('${encodeURI(course.image)}')` }
@@ -69,8 +69,8 @@
<!-- Title (when image present): max 2 lines --> <!-- Title (when image present): max 2 lines -->
<div <div
v-if="course.image" v-if="course.image"
class="font-semibold text-ink-gray-9 leading-snug mb-1 line-clamp-2 text-sm" class="font-semibold text-ink-gray-9 leading-snug mb-1 text-sm"
style="min-height: 2.5rem" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5rem"
> >
{{ course.title }} {{ course.title }}
</div> </div>
@@ -100,7 +100,7 @@
</div> </div>
<!-- Footer --> <!-- Footer -->
<div class="flex items-center justify-between pt-3 border-t border-outline-gray-1"> <div class="flex items-center justify-between pt-2 pb-1 border-t border-outline-gray-1">
<!-- Instructors --> <!-- Instructors -->
<div class="flex items-center gap-1.5"> <div class="flex items-center gap-1.5">
<div class="flex -space-x-1.5"> <div class="flex -space-x-1.5">

View File

@@ -92,8 +92,14 @@ const embedUrl = computed(() => {
if (!props.channel) return '' if (!props.channel) return ''
if (props.platform === 'twitch') { if (props.platform === 'twitch') {
const parent = window.location.hostname // Twitch requires parent= for every domain the embed runs on.
return `https://player.twitch.tv/?channel=${props.channel}&parent=${parent}&autoplay=false` // Collect unique hostnames: current + localhost fallback
const hosts = new Set<string>()
hosts.add(window.location.hostname || 'localhost')
// Always include localhost so dev server works too
hosts.add('localhost')
const parentParams = [...hosts].map(h => `parent=${h}`).join('&')
return `https://player.twitch.tv/?channel=${props.channel}&${parentParams}&autoplay=false`
} }
if (props.platform === 'youtube') { if (props.platform === 'youtube') {