Responsive Behavior

How the navigation adapts to mobile, tablet, and desktop viewports.

Live Simulation

v2.0 Refined

Responsive behavior

Test our adaptive grid and fluid navigation system in real-time. Use the simulator below to interact with actual platform pages across different hardware viewports.

recura.app/dashboard?sim=true

Breakpoint Sync

All components utilize the standard Tailwind breakpoint system (sm: 640px, md: 768px, lg: 1024px) to ensure absolute visual parity.

Safe-area Integrity

Headers and footers are injected with 'env(safe-area-inset-*' variables to ensure hardware compatibility with notches.

Touch Parity

Interactive targets maintain a minimum 44px hitbox on touch devices, regardless of visual scaling or screen density.

src/lib/responsive.tsx

// Implementation of hardware safe-areas & breakpoint triggers
export function ResponsiveBridge({ children }) {
  const [viewport, setViewport] = useState('desktop');

  return (
    <div className={cn(
      "min-h-screen transition-all duration-500",
      "lg:p-8",                    // Desktop padding
      "md:p-4",                    // Tablet padding
      "p-0 pb-safe",              // Mobile safe-area
      viewport === 'mobile' ? "bg-slate-50" : "bg-white"
    )}>
      {children}
    </div>
  );
}