From a1626a5c20d1b22adb68b0b439c660edf37f3c45 Mon Sep 17 00:00:00 2001
From: kenilkb <kenil@tech4biz.org>
Date: Fri, 17 Jul 2026 15:44:22 +0530
Subject: [PATCH] Responsive mobile layout fix for showcase lightbox

---
 Channel-Frontend/src/pages/ShowcasePage.tsx | 26 ++++++++++-----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/Channel-Frontend/src/pages/ShowcasePage.tsx b/Channel-Frontend/src/pages/ShowcasePage.tsx
index 4080e2e..7498764 100644
--- a/Channel-Frontend/src/pages/ShowcasePage.tsx
+++ b/Channel-Frontend/src/pages/ShowcasePage.tsx
@@ -59,7 +59,7 @@ const YouTubeEmbed: React.FC<{ videoId: string }> = ({ videoId }) => {
 const InstagramEmbed: React.FC<{ postId: string; size: 'compact' | 'theater' | 'cinema' }> = ({ postId, size }) => {
   const maxWidthClass = size === 'compact' ? 'max-w-[360px]' : size === 'theater' ? 'max-w-[420px]' : 'max-w-[480px]';
   return (
-    <div className={`w-full ${maxWidthClass} aspect-[9/16] max-h-[75vh] mx-auto bg-ink-950 rounded-2xl overflow-hidden shadow-2xl flex justify-center items-center`}>
+    <div className={`w-full ${maxWidthClass} aspect-[9/16] max-h-full mx-auto bg-ink-950 rounded-2xl overflow-hidden shadow-2xl flex justify-center items-center`}>
       <iframe
         src={`https://www.instagram.com/p/${postId}/embed`}
         className="w-full h-full border-0"
@@ -91,7 +91,7 @@ const TwitterEmbed: React.FC<{ url: string }> = ({ url }) => {
   }, [url]);
 
   return (
-    <div className="w-full max-h-[70vh] overflow-y-auto flex justify-center bg-white p-6 rounded-2xl">
+    <div className="w-full max-h-full overflow-y-auto flex justify-center bg-white p-4 sm:p-6 rounded-2xl">
       <blockquote className="twitter-tweet" data-align="center">
         <a href={url}>Loading Tweet...</a>
       </blockquote>
@@ -303,17 +303,17 @@ export const ShowcasePage: React.FC = () => {
                 animate={{ opacity: 1, scale: 1, y: 0 }}
                 exit={{ opacity: 0, scale: 0.9, y: 20 }}
                 transition={{ type: 'spring', damping: 25, stiffness: 250 }}
-                className={`relative bg-ink-900 border border-ink-800 rounded-3xl overflow-hidden shadow-2xl flex transition-all duration-300 ${
+                className={`relative bg-ink-900 border border-ink-800 rounded-3xl overflow-hidden shadow-2xl flex flex-col transition-all duration-300 ${
                   lightboxSize === 'cinema' 
-                    ? 'w-[95vw] max-w-7xl flex-col h-[90vh]' 
+                    ? 'w-[95vw] max-w-7xl md:flex-col h-[85vh] md:h-[90vh]' 
                     : lightboxSize === 'theater' 
-                    ? 'w-[85vw] max-w-6xl flex-row max-h-[85vh]' 
-                    : 'w-full max-w-4xl flex-row max-h-[80vh]'
+                    ? 'w-[95vw] md:w-[85vw] max-w-6xl md:flex-row h-[85vh] md:max-h-[85vh]' 
+                    : 'w-[95vw] md:w-full max-w-4xl md:flex-row h-[85vh] md:max-h-[80vh]'
                 }`}
                 onClick={(e) => e.stopPropagation()}
               >
                 {/* Media Container */}
-                <div className="flex-1 bg-black flex items-center justify-center p-4 overflow-hidden relative min-h-[300px]">
+                <div className="flex-1 bg-black flex items-center justify-center p-3 sm:p-4 overflow-hidden relative min-h-[180px] sm:min-h-[240px] md:min-h-[300px]">
                   {(() => {
                     const ytId = extractYouTubeVideoId(activeItem.youtubeUrl);
                     if (ytId) {
@@ -335,15 +335,15 @@ export const ShowcasePage: React.FC = () => {
                 </div>
 
                 {/* Info Container */}
-                <div className={`p-6 flex flex-col justify-between border-ink-800 bg-ink-950 overflow-y-auto ${
+                <div className={`p-5 sm:p-6 flex flex-col justify-between border-ink-800 bg-ink-950 overflow-y-auto ${
                   lightboxSize === 'cinema' 
-                    ? 'w-full border-t h-[30%] shrink-0' 
-                    : 'w-full md:w-80 border-t md:border-t-0 md:border-l shrink-0'
+                    ? 'w-full border-t h-[40%] md:h-[30%] shrink-0' 
+                    : 'w-full md:w-80 border-t md:border-t-0 md:border-l h-[45%] md:h-auto shrink-0'
                 }`}>
                   <div className="space-y-4">
                     {/* Toolbar with Resizer Preset Buttons */}
                     <div className="flex justify-between items-center pb-2 border-b border-ink-800/60">
-                      <div className="flex bg-ink-900 p-0.5 rounded-lg border border-ink-800 gap-0.5">
+                      <div className="hidden md:flex bg-ink-900 p-0.5 rounded-lg border border-ink-800 gap-0.5">
                         <button
                           onClick={() => setLightboxSize('compact')}
                           className={`p-1.5 rounded text-[9px] font-black uppercase tracking-wider flex items-center gap-1 transition-all cursor-pointer ${
@@ -383,7 +383,7 @@ export const ShowcasePage: React.FC = () => {
                       </div>
                       <button
                         onClick={() => setPlayingVideoId(null)}
-                        className="text-ink-400 hover:text-ink-0 transition-colors p-1.5 rounded-lg hover:bg-ink-850 cursor-pointer"
+                        className="text-ink-400 hover:text-ink-0 transition-colors p-1.5 rounded-lg hover:bg-ink-850 cursor-pointer ml-auto md:ml-0"
                       >
                         <X className="w-4 h-4" />
                       </button>
@@ -405,7 +405,7 @@ export const ShowcasePage: React.FC = () => {
                     </h3>
                     
                     {activeItem.description && (
-                      <div className="max-h-60 overflow-y-auto pr-1">
+                      <div className="max-h-60 md:max-h-none overflow-y-auto pr-1">
                         <p className="text-xs font-medium text-ink-400 leading-relaxed whitespace-pre-wrap">
                           {activeItem.description}
                         </p>