fix: resolve video grid footer overlap using relative positioning

[dhruveshmishra]

This PR fixes #1102

Fixes the issue where the video cards overlapped with the footer on mobile views, slow image loads, or window resizing.

What was done:

• Refactored the layout to use position: relative on the active video group and position: absolute on inactive ones. This allows the browser to dynamically adjust the container height natively.
• Removed all unnecessary JavaScript height-sync functions, timeouts, and resize/load event listeners, simplifying the logic down to a single clean loop.

I am attaching the Screen Recording for the same.

Screen.Recording.2026-06-20.at.2.34.36.AM.mov

[gemini-code-assist]

Code Review

This pull request simplifies the show/hide logic for video groups in video-landing-page.html by removing the syncContainerHeight function and toggling the CSS position property (relative vs absolute) instead. The reviewer noted that setting position: absolute on inactive groups without specifying coordinates can lead to layout issues and unwanted scrollable areas, and suggested explicitly pinning the inactive groups or using display toggles.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[Copilot]

Pull request overview

This PR addresses #1102 by updating the Videos landing page tab-switch logic so the active video grid group participates in normal document flow, preventing the grid from overlapping the footer on mobile/resizes/slow loads.

Changes:

• Refactors the “show/hide video groups” logic to toggle each .video-group between position: relative (active) and position: absolute (inactive).
• Removes the previous container height synchronization approach in favor of native layout sizing.

[github-actions]

PR Preview Action v1.6.3
Preview removed because the pull request was closed.
2026-06-20 18:34 UTC

[NSTKrishna]

data/kanvas_discuss.json Revert. This is of out of the scope for PR

[dhruveshmishra]

done @NSTKrishna

[PARTH-TUSSLE]

@dhruveshmishra @NSTKrishna LGTM.

[saurabhraghuvanshii]

@dhruveshmishra build failing please take a look.

[dhruveshmishra]

@saurabhraghuvanshii The build is failing because docs/data/kanvas_discuss.json contains HTML instead of valid JSON. It seems to have been populated with a Cloudflare '301 Moved Permanently' redirect page instead of the actual data.

As I had run the server locally through hugo and golang without docker so when hugo server runs it run whole data json packages and for that the html files are not sending proper data thats why building is failed I had corrected it by changing the code to json format which I had commited earlier. I think there is a mistake in JSON file please take a look

[NSTKrishna]

@saurabhraghuvanshii The build is failing because docs/data/kanvas_discuss.json contains HTML instead of valid JSON. It seems to have been populated with a Cloudflare '301 Moved Permanently' redirect page instead of the actual data.

As I had run the server locally through hugo and golang without docker so when hugo server runs it run whole data json packages and for that the html files are not sending proper data thats why building is failed I had corrected it by changing the code to json format which I had commited earlier. I think there is a mistake in JSON file please take a look

@dhruveshmishra this pr #1105 handle build error part it is merged

[NSTKrishna]

LGTM

[dhruveshmishra]

@NSTKrishna ohk and now my build checks are also working fine

[dhruveshmishra]

@NSTKrishna @saurabhraghuvanshii does any changes needed or it is ready to merge

[welcome]

        Thank you for contributing to the Layer5 community! 🎉 \ \ \ \         ⭐ Please leave a star on the project. 😄

[saurabhraghuvanshii]

Thanks @dhruveshmishra lgtm!!