search

digitalfabrik / integreat-app

React JS and React Native App for Integreat
https://integreat.app
MIT License
45 stars 15 forks source link

Chat icon covers footer in small screens on rtl #2849

Open LeandraH opened 4 days ago

LeandraH commented 4 days ago

Describe the Bug

When on a rtl language setting and in a mobile screen, the chat icon is horizontally centered instead of on the left, and thus covers the footer.

Steps to Reproduce

  1. Make your browser window small enough to see the mobile view
  2. Go to 'http://localhost:9000/testumgebung/ar'
  3. See that the chat icon is centered at the bottom
  4. Scroll down to the footer
  5. See that you can't click on the footer

Expected Behavior

The icon should be on the left and the footer accessible.

Actual Behavior

The icon is centered and the footer can't be clicked.

Additional Information

Image

f1sh1918 commented 4 days ago

Maybe we should set for mobile mode the button above the footer and not on the footer. On Smaller devices the underlaying toolbar icons will not be clickable Additionally another small issues could be addressed like the margin-left on the button to a margin-inline-start

image