Yaseen/Tech4biz-channel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive mobile layout fix for showcase lightbox

Browse Source
This commit is contained in:
kenilkb 2026-07-17 15:44:22 +05:30
parent 29871cf834
commit a1626a5c20
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
Channel-Frontend/src/pages/ShowcasePage.tsx
View File

@ -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>