fix: resolve mobile container shrinking on links page (v2)

[vinay3717]

Fixes #2 — Mobile Container Shrinking on Links Page

Problem

On mobile screen sizes, the main container on the /links page progressively shrank until it became invisible, especially when the page had many links loaded.

Root Cause

In MainPanel.tsx, a ResizeObserver watched the content's scrollWidth/scrollHeight and fed those values directly into GSAP animations on every resize event. On mobile, table content and staggered row animations caused scrollWidth to fluctuate rapidly, triggering repeated, overlapping GSAP tweens on the panel's width. This created a feedback loop that visually shrank the container over time.

Changes Made

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

• Removed width from the GSAP animation driven by the ResizeObserver — width is now handled purely by CSS instead of being recalculated from scrollWidth
• Added debouncing (120ms) to the ResizeObserver callback to prevent it from firing excessively during rapid layout changes (e.g. staggered row animations)
• Added gsap.killTweensOf(mainRef.current, "height") before starting a new height tween, to prevent overlapping/competing animations from compounding
• Removed overflow-hidden from the main element's className (was conflicting with overflow-y-auto and clipping content)
• Changed md:w-full to w-full so width behaves consistently across all breakpoints

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 the table from forcing overflow that could retrigger the resize loop

Testing

• Tested locally on mobile viewport (iPhone SE, Galaxy S8) via Chrome DevTools device toolbar
• Tested with 25 mock links to stress-test the scroll/resize behavior with a tall, scrollable table
• Confirmed the container no longer shrinks while scrolling or as content loads(for mock data)