fix(styling): userinfocard not able to be seen in certain places

apps/web/src/components/app/ChatPanel/ChatPanel.tsx

@@ -300,7 +300,7 @@ export default function ChatPanel(props: Props) {
 
   return (
     <div
-      className={`${props.isObsPanel ? 'w-full text-white' : 'md:border-l border-border bg-mantle w-[350px] max-w-[350px]'} flex flex-col h-full`}
+      className={`${props.isObsPanel ? 'w-full text-white' : 'w-full max-w-none md:w-[350px] md:max-w-[350px] md:border-l border-border bg-mantle'} flex flex-col h-full min-w-0`}
     >
       <div
         ref={scrollRef}

apps/web/src/components/app/Livestream/Livestream.tsx

@@ -61,7 +61,7 @@ export default function LiveStream(props: Props) {
   }
 
   return (
-    <div className={`${isMobile ? 'flex flex-col' : 'flex'} h-[calc(100vh-64px)] w-full`}>
+    <div className={`${isMobile ? 'flex flex-col' : 'flex'} h-[calc(100vh-64px)] w-full min-w-0`}>
       <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
         {isRestricted && props.canViewRestrictedStream && (
           <div className="flex items-start gap-3 border-b border-amber-500/30 bg-amber-500/10 px-4 py-3 text-foreground">
@@ -80,9 +80,11 @@ export default function LiveStream(props: Props) {
             </div>
           </div>
         )}
-        <StreamPlayer />
+        <div className="min-h-0 flex-1 overflow-hidden bg-black">
+          <StreamPlayer />
+        </div>
         {isMobile && (
-          <div className="flex-1 min-h-[250px] max-h-[400px] border-t border-border">
+          <div className="w-full min-w-0 flex-1 min-h-[250px] max-h-[400px] border-t border-border">
             <ChatPanel />
           </div>
         )}

apps/web/src/components/app/StreamPlayer/StreamPlayer.tsx

@@ -177,8 +177,8 @@ export default function StreamPlayer() {
   }, [clearWaitingTimeout, playerKey, triggerRecovery]);
 
   return (
-    <div className="relative">
-      <MediaController className="w-full aspect-video">
+    <div className="relative flex h-full w-full min-w-0 items-center justify-center bg-black">
+      <MediaController className="h-full w-full">
         <HlsVideo
           key={playerKey}
           ref={videoRef}
@@ -186,6 +186,7 @@ export default function StreamPlayer() {
           crossOrigin="anonymous"
           playsInline
           autoplay
+          className="h-full w-full object-contain"
         />
         <MediaLoadingIndicator slot="centered-chrome" noAutohide />
         <MediaControlBar className="w-full px-2 sm:px-4 pb-1">
@@ -200,7 +201,10 @@ export default function StreamPlayer() {
             {(process.env.NODE_ENV === 'development' || userInfo?.isLive) && (
               <MediaChromeButton onClick={() => triggerRecovery('manual_reload')}>
                 <span className="flex h-4 w-4 items-center justify-center">
-                  <RefreshCw className={cn("h-5 w-5 shrink-0", isRecovering && "animate-spin")} strokeWidth={2.5} />
+                  <RefreshCw
+                    className={cn('h-5 w-5 shrink-0', isRecovering && 'animate-spin')}
+                    strokeWidth={2.5}
+                  />
                 </span>
                 <span slot="tooltip-content">Retry stream</span>
               </MediaChromeButton>

apps/web/src/components/app/UserInfoCard/UserInfoCard.tsx

@@ -8,7 +8,7 @@ import { Preview } from '@/components/ui/channel-desc-fancy-area/preview';
 
 export default function UserInfoCard(props: Props) {
   return (
-    <div className="bg-mantle p-4 border-b h-48 flex flex-col">
+    <div className="bg-mantle p-4 border-b h-48 shrink-0 flex flex-col">
       <div className="flex items-start justify-between mb-4 flex-shrink-0">
         <div className="flex items-center space-x-4">
           <Avatar className="h-16 w-16">