From @zachlankton in this PR comment:
"Not sure the width 120% is doing anything that I can see on the page, the items that are working are the negative margins.
This will come back to bite you later on in development when you realize you need to do this for all components that are nested inside the Layout that has the padding that you are trying to overcome.
Additionally, it could be hard to debug the css later as the "consumers" of the StudentsPage may not be aware that this component will apply negative margins on smaller viewports. As developers we expect the components we consume to stay inside of the box we put them in.
The better approach would be to target the Layout thats adding the padding to be less on smaller viewports. This will then apply to All pages equally and eliminate the need to go through and update every component that you want to achieve this effect for."
There is negative margin on the Student's Chatbot CSS file that ought to be refactored. Code pointer: https://github.com/Frempco/web-client/blob/main/src/components/pages/StudentsPage/Chatbox.css.tsx#L6-L11
From @zachlankton in this PR comment: "Not sure the width 120% is doing anything that I can see on the page, the items that are working are the negative margins.
This will come back to bite you later on in development when you realize you need to do this for all components that are nested inside the Layout that has the padding that you are trying to overcome.
Additionally, it could be hard to debug the css later as the "consumers" of the StudentsPage may not be aware that this component will apply negative margins on smaller viewports. As developers we expect the components we consume to stay inside of the box we put them in.
The better approach would be to target the Layout thats adding the padding to be less on smaller viewports. This will then apply to All pages equally and eliminate the need to go through and update every component that you want to achieve this effect for."