Use relative units of sizing in css

[NehaMadnani]

Instead of using px, need to switch to em / rem or % for all CSS properties

[NehaMadnani]

Objective:

Update the CSS files to replace all instances of px units with scalable units such as rem, em, or %. This will make the styles more responsive and adaptable to different screen sizes and user preferences.

• Use rem/em for font-sizes
• Use % for padding & margin

Files to Update:

• [ ] ApiConnections.css - @Torence7
• [ ] ApiTabs.css - @Torence7
• [ ] App.css - @Torence7
• [ ] ConfigurationComponent.css
• [ ] ConversationRow.css
• [ ] EvaluationComponent.css
• [ ] Modal.css
• [ ] RecordedTests.css
• [ ] Sidebar.css
• [ ] TestGroupSideBar.css
• [ ] WebSocket.css

Task Details:

1. Choose one / two CSS files to work on and mention them in the comments

2. Identify and Replace px Units:

   • For font sizes: Replace px with rem or em units, considering a base font size of 16px (i.e., 1rem = 16px).
   • For padding, margin, width, height, etc.: Replace px with rem, em, or % units where appropriate. Use % for container widths and heights if they need to be relative to their parent elements.
   • Ensure that all styles maintain their visual design integrity after the conversion.

3. Test the Changes:

   • Test the application after making changes to ensure that all components are rendering correctly on different screen sizes.
   • Verify that no layout or design issues arise from the unit conversion.

4. Create a Pull Request:

   • Once the changes are made and tested, submit a pull request with a description of the changes and the reasons for any specific unit choices.

Acceptance Criteria:

-px units for font-size, padding & margin in the specified files are replaced with rem, em, or %.

• The application design remains consistent across different devices and screen sizes.
• No layout issues or design regressions are introduced.

Additional Notes:

• If you encounter any px values that are tricky to convert, please leave a comment in the pull request explaining the situation and suggesting a potential solution.
• If possible, run tests on different browsers to ensure cross-browser compatibility.
• Please test and attach screenshots of the app with updated CSS to enable prompt reviews

[Torence7]

I would like to work on this issue for the following files: ApiConnections.css ApiTabs.css App.css

[NehaMadnani]

Please go ahead. I've mentioned your names against those files in the issue.