fix: resolve mobile container shrinking on links page

[vinay3717]

Fixes #2 — Mobile Container Shrinking on Links Page

Problem

On mobile screen sizes, the main container on the /links page was progressively shrinking until it became invisible. This was caused by a ResizeObserver in MainPanel.tsx that watched the content width and fed it back into GSAP animations, creating a feedback loop. The table inside the links page caused scrollWidth to fluctuate on mobile, which GSAP then animated — shrinking the container repeatedly.

Root Cause

In MainPanel.tsx, the ResizeObserver was calculating contentWidth from scrollWidth and passing it directly to gsap.to() as a width property. On mobile, the table content caused scrollWidth to grow and shrink unpredictably, and GSAP kept animating the panel width to match it.

Changes Made

frontend/src/components/layouts/utils/MainPanel.tsx

• Removed width from GSAP set and to animations inside the ResizeObserver
• Let CSS handle the width instead of JavaScript
• Removed overflow-hidden from the main element to prevent content clipping

frontend/src/routes/links.tsx

• Added px-4 sm:px-6 horizontal padding to the outer container for proper mobile spacing
• Added min-w-0 w-full to the table wrapper to prevent overflow

frontend/src/styles/index.css

• Added will-change: transform, opacity to .animate-in for smoother GSAP animations

Testing

Tested on mobile viewport (iPhone SE, Galaxy S8) using Chrome DevTools device toolbar — container no longer shrinks on the links page.