From a26f02065a5604b4daac77ae5de141c31ed09594 Mon Sep 17 00:00:00 2001
From: joylessorchid <mail@ciphral.com>
Date: Mon, 16 Mar 2026 06:59:34 +0300
Subject: [PATCH] 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>
---
 frontend/src/components/CourseCard.vue  |  8 ++++----
 frontend/src/components/StreamEmbed.vue | 10 ++++++++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index fcd5bfec..83a601f5 100644
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -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">
diff --git a/frontend/src/components/StreamEmbed.vue b/frontend/src/components/StreamEmbed.vue
index b425e6b0..fcae5fe5 100644
--- a/frontend/src/components/StreamEmbed.vue
+++ b/frontend/src/components/StreamEmbed.vue
@@ -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') {