Website feedback form is not responsive

Hi @4shweta__sharma,

The website feedback form is still not responsive after applying the MR. Moving the status to "Needs Work."
Thank you!

Styled the contact form in the theme.
Here are the screenshots attaching for the reference.
and here is the MR: https://git.drupalcode.org/project/picked_fresh/-/merge_requests/14

Hello @tanushree gupta,
I've installed the theme version 1.0.1 in Drupal version 10.3.4 and enabled the theme. After enabling found an unexpected error on the page for which applied the patch provided in issue: Issue #3441416 🐛 The website encountered an unexpected error RTBC . After that visited the contact page (/contact/feedback) and resizing the screen similar to mobile devices, found the form is'nt design for responsive design. I applied MR!2 but the issue wasn't resolved. Then I applied MR!14 which applied cleanly, however the issue still persists. I found the button and form design has been changed which doesn't matches with the theme design. Even the border around the fields in the form makes it difficult to identify the input field, it would be better if the border is'nt added to the div wrapping the form input/textarea elements. Hence, changing to NW. Attached ss for reference.

@esha_kundu Thanks for the feedback. I have updated the style of the contact form to match the theme.
and tested on responsive devices.
Here are the screenshots I am attaching for the reference.
Here is the MR: https://git.drupalcode.org/project/picked_fresh/-/merge_requests/14
commit id: https://git.drupalcode.org/project/picked_fresh/-/merge_requests/14/diff...

Hello @tanushree gupta,
I appled the MR!14 which applied cleanly. The form design is improved, resolving the earlier design issues mentioned in #9 🐛 Website feedback form is not responsive Active , however I find the submit button is not properly aligned with the form fields. In Firefox browser a horizontal scroll is coming for mobile devices. IMO if the left sidebar region includes content it is better to display the sidebar in full width in mobile devices rather than maintaining the Desktop layout as I observed many themes have designed the sidebar in such a manner. I found the horizontal scroll is occuring due to the display: table; property included in the body element. I added the below code in the responsive.css file and the overflow issue is resolved.

@media screen and (max-width: 992px) {
  body.path-contact {
    display: block;
  }
  .path-contact #wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .path-contact #wrapper>div {
    width: 100%;
  }
  .path-contact #wrapper #content {
    margin-left: 0;
  }
  .path-contact #wrapper #sidebar-left,
  .path-contact #wrapper #sidebar-right {
    width: 100%;
  }
  .path-contact #wrapper #sidebar-left {
    margin-left: 0;
  }
}

I reviewed the MR!14 and noticed that the media query is included in the style.css file while there is a separate file name responsive.css present in the theme. It would be better to maintain the separation of responsive code. Included ss for reference hence moving it to NW.
Thanks

Updated the style according to feedback.

Hello @tanushree gupta,
I've reviewed the updates that you have made and found the media queries for responsive devices have been separated in MR!14. I applied the updated MR!14, which applied cleanly and on visiting the /contact/feedback page, the buttons are properly aligned. I visited the same page in Firefox browser and resized the screen for mobile devices and found the overflow issue has been resolved. As all the problems that I had mentioned earlier in #11 🐛 Website feedback form is not responsive Active have been addressed, hence moving to RTBC. Please find the ss for reference.
Thanks