feat(ui): implement fluid mobile responsive layout matrix grids #579

[annukumar123]

#579 fixes

Overview

Refactored the Settings Panel configuration viewport structure using fluid responsive design properties to seamlessly adapt between mobile device viewports and larger production desktop layouts.

Key Changes

• Dynamic Multi-Column Adjustments: Shified the hardcoded input field matrix wrapper grid setup from grid-cols-2 down to a fluid grid-cols-1 sm:grid-cols-2 arrangement.
• Fluid Actions Alignment: Adjusted button wrappers using flex flex-col sm:flex-row configurations so that primary buttons safely span full-width layout boundaries on narrow viewports without causing text truncation.
• Responsive Breakpoint Verification: Created target testing layers checking for structural implementation markers directly inside Vitest container nodes.

Verification Checklist

• Confirmed range items stack natively into a single clean column on narrow mobile device simulations.
• Verified full desktop multi-column structures dynamically snap back into place past the 640px viewport line.
• Component test specifications compile and complete completely green.

[vercel]

@annukumar123 is attempting to deploy a commit to the Darshan's projects Team on Vercel.

A member of the Team first needs to authorize it.

[annukumar123]

@imDarshanGK
Both CI are working. you can verify now