Overlapping Design and Misaligned Elements on Interactive DNR Tool Page

[Aditya-Prakash14]

Expected Behavior

The layout of the "Interactive DNR Tool" page should have a clean, non-overlapping design where all elements are properly aligned. The navigation menu, content sections, and input areas should be displayed without any visual conflicts, ensuring a responsive and user-friendly interface.

Actual Behavior

• The "Upload Extension Files" and "Upload Manifest" sections overlap each other, making the interface cluttered and difficult to use.
• The Chrome Labs logo also appears to be incorrectly positioned, contributing to the misalignment.

Steps to Reproduce the Problem

1. Open the webpage displaying the "Interactive DNR Tool."
2. Observe the layout on a screen resolution of 768 x 1009 or similar.
3. Note the overlapping content in the middle of the page.

Specifications

• Version: [Specify the version of the application or webpage if known]
• Platform: macOS or any browser (tested with Chrome as shown in the screenshot)
• Screen Resolution: 768 x 1009
• Additional details: Refer to the attached screenshot for visual reference.

Suggested Fix

• Adjust the CSS position and margin properties for the "Upload Extension Files" and "Upload Manifest" sections to prevent overlapping.
• Ensure proper flexbox or grid layout usage to maintain responsiveness.
• Correct the positioning of the Chrome Labs logo to align with its intended placement.

[Aditya-Prakash14]

/assign

[oliverdunk]

Thanks for offering to look at this!

[Aditya-Prakash14]

i want to contibute i this repo