feat: add responsive mobile-first layout to settings panel preferences sheet

[prasiddhi-105]

Description

This PR addresses the user interface on small-viewports by restructuring the core configuration sheet grid framework to utilize responsive breakpoints. The parameters now stack gracefully vertically on smaller screens while preserving the two-column display profile on standard wide screens.

Changes Implemented

🔹 Frontend Layout Refactoring (frontend/src/components/SettingsPanel.jsx)

• Replaced the hardcoded desktop-only grid container logic (grid-cols-2) with modern mobile-first utility classes (grid-cols-1 sm:grid-cols-2).
• Restructured field arrangement layers to preserve alignment constraints on standard desktop viewport profiles while improving tap targets on mobile layouts.
• Retained all existing state hooks, errors arrays, and localStorage drafts management components.

🔹 Component Verification Suite (frontend/src/components/SettingsPanel.test.jsx)

• Introduced a complete isolated vitest component script with explicit jsdom sandbox environment annotations.
• Validated that label headers, dynamic input fields, and core element targets mount flawlessly within the structural wrapper tree.

Verification Status

The test completed successfully using the standard Vitest pipeline:

Closes #788

[vercel]

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

A member of the Team first needs to authorize it.

[prasiddhi-105]

hiii, @imDarshanGK , i have completed all the 3 issues u assigned to me, thankyou so much for assigning me, after u review all these issues and PR's, let me know if i can be assigned to other issues, where i raised my similar interest of contributing,
thankyou once again!!

[AshutoshDash1999]

@prasiddhi-105 again I'm just a contributor.

[prasiddhi-105]

@prasiddhi-105 again I'm just a contributor.

Oh I'm so sorry, I did it by mistake !!! 😭😭🙏🏻

[imDarshanGK]

@prasiddhi-105 add video demo and resolve conflicts