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 -->
<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="
course.image
? { backgroundImage: `url('${encodeURI(course.image)}')` }
@@ -69,8 +69,8 @@
<!-- Title (when image present): max 2 lines -->
<div
v-if="course.image"
class="font-semibold text-ink-gray-9 leading-snug mb-1 line-clamp-2 text-sm"
style="min-height: 2.5rem"
class="font-semibold text-ink-gray-9 leading-snug mb-1 text-sm"
style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5rem"
>
{{ course.title }}
</div>
@@ -100,7 +100,7 @@
</div>
<!-- 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 -->
<div class="flex items-center gap-1.5">
<div class="flex -space-x-1.5">

View File

@@ -92,8 +92,14 @@ const embedUrl = computed(() => {
if (!props.channel) return ''
if (props.platform === 'twitch') {
const parent = window.location.hostname
return `https://player.twitch.tv/?channel=${props.channel}&parent=${parent}&autoplay=false`
// Twitch requires parent= for every domain the embed runs on.
// 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') {