/**
* ContentWrapper - Adjusts main content when chat is expanded
*
* When chat is expanded to 25vw, this wrapper pushes content to the left
* to maintain visibility and prevent overlap.
* On mobile/tablet, chat is full-screen overlay, so no margin adjustment needed.
*/
'use client';
import { useChatExpanded } from '@/lib/stores/chatStore';
import { useMobileDetect } from '@/hooks/useMobileDetect';
export function ContentWrapper({ children }: { children: React.ReactNode }) {
const [isExpanded] = useChatExpanded();
const { isMobile, isTablet } = useMobileDetect();
// On mobile/tablet, chat is full-screen overlay, no margin needed
const shouldApplyMargin = isExpanded && !isMobile && !isTablet;
return (
<div
className="transition-all duration-300"
style={{
marginRight: shouldApplyMargin ? '25vw' : '0',
}}
>
{children}
</div>
);
}
