Enhance responsive design for mobile and tablet devices

[poshithNandyala]

Resolves #156

Description:

This PR resolves responsiveness issues in the Custom Code Editor, ensuring a smoother user experience across mobile (below 768px) and tablet devices. The layout is now optimized, and UI elements are properly aligned for all screen sizes.

Changes Made:

• Adjusted the code editor window to resize dynamically based on screen width.
• Modified button sizes and placements to avoid overlap on smaller screens.
• Applied media queries for screens below 768px and 1024px to improve alignment and usability.

Testing:

• Tested on various devices:
  • Mobile (iPhone 12 Pro, 390px): No UI overlap, buttons and editor properly aligned.
  • Tablet (768px): Layout is well-aligned with smooth user interaction.
  • Desktop (1440px): Maintains consistent design without issues.

Screenshots:

1. Desktop View

2. Tablet View

3. Mobile View
   

PR Fixes:

• Responsiveness issues on mobile and tablet devices.
• Overlapping buttons and misaligned UI elements on smaller screens.

Checklist before requesting a review:

• ✅ I have pulled the latest changes from the main branch.
• ✅ I have tested the changes locally.
• ✅ I have run npm run lint:fix locally to resolve any linting issues.
• ✅ I have performed a self-review of my code.
• ✅ I confirm that there is no similar/duplicate pull request regarding the same issue.

[vercel]

@poshithNandyala is attempting to deploy a commit to the Dhanush Nehru's projects Team on Vercel.

A member of the Team first needs to authorize it.

[poshithNandyala]

Hello Sir/Mam,

I have made changes mainly to the CSS and minor JavaScript adjustments related to styling and responsiveness. There is 1 workflow awaiting approval that requires your review.

If there are any further suggestions or adjustments needed, please feel free to let me know, and I’ll be happy to make the necessary changes.

Thank you for your time.

Best regards,
poshithNandyala

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
custom-code-editor	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 18, 2024 6:12am

[DhanushNehru]

Looks great @poshithNandyala