search

imperfectandcompany / Imperfect-Gamers-Site-Store

Our robust community site integrating Steam for enhanced user interactions and data management, powered by Remix with Tailwind CSS for optimistic, responsive UI. Features CI/CD with GitHub Actions and Docker for seamless deployment and maintenance.
https://store.imperfectgamers.org/
Other
0 stars 0 forks source link

Enhance UI Responsiveness and Z-Index Management for Modals #70

Closed cheesea3 closed 1 month ago

cheesea3 commented 1 month ago

Issue Description:

We've identified several UI issues that need addressing to improve the user experience on mobile devices and ensure proper layering of UI elements.

Tasks:

  1. Z-Index Management for Cookie Settings Modal:

    • Ensure that the cookie settings modal has a higher z-index than the cookie banner to prevent overlay issues on smaller devices.
    • This adjustment will prevent the modal from being pushed down by any element, particularly on devices with smaller screens.

  2. Centering the Cookie Modal:

    • Currently, the cookie modal is not perfectly centered on the screen, showing extra space above it. Adjust the modal's positioning to ensure it is perfectly centered, enhancing visual symmetry and consistency.

  3. Mobile Responsiveness of Join Now Button:

    • The 'Join Now' button, which triggers the 'Imperfect Gamers Club' modal, requires optimization to be fully responsive on mobile devices.
    • Ensure that this button and its associated modal display correctly across all devices without affecting or being affected by other UI elements like the cookie banner.

  4. Cookie Banner Mobile Experience:

    • Adjust the cookie banner to ensure it covers the necessary parts of the interface without hindering user interaction on mobile devices.
    • The goal is to maintain the banner's visibility and accessibility while ensuring it does not obstruct other interactive elements on the page.

Expected Outcome:

Implementing these changes will provide a smoother and more intuitive user experience across all devices, particularly mobile, by improving the visibility and accessibility of essential UI components.

Additional Notes:

These adjustments are critical for maintaining compliance with UI design standards and enhancing user engagement, especially for mobile users who represent a significant portion of the traffic.