search

enatega / food-delivery-multivendor

Enatega is a fully realized and customizable food delivery application that can be used to set up your own order/delivery management system. For more information, visit the Enatega product page: šŸš€šŸ›’šŸ“¦šŸŒ
https://enatega.com/?utm_source=github&utm_medium=referral&utm_campaign=github_guide&utm_id=12345678
MIT License
783 stars 254 forks source link

Header Overlapping in Enatega Restaurant App Across Multiple Languages #271

Closed ceb112 closed 6 months ago

ceb112 commented 8 months ago

Describe the bug When selecting certain languages such as Swedish, Deutsche, Thai, and French in the Enatega Restaurant App, a UI issue occurs where headers on the homepage overlap each other. Specifically, when clicking on a specific header, such as "Orders" in the Swedish language, it causes the "Processing" header to be partially hidden or overlapped. This issue affects the clarity and functionality of the app's interface, potentially leading to confusion and frustration among users.

To Reproduce

  1. Launch the Enatega Restaurant App.
  2. Change the language setting to Swedish, Deutsche, Thai, or French.
  3. Navigate to the homepage.
  4. Click on a specific header, such as "Orders."
  5. Observe that the selected header partially overlaps with other headers, such as "Processing."

Expected behavior

  1. When clicking on a specific header, such as "Orders," in any language setting, it should not cause overlapping or hiding of other headers on the homepage.
  2. Each header should maintain its position and visibility without being obstructed by other UI elements.

Screenshots

https://github.com/ninjas-code-official/food-delivery-multivendor/assets/153413752/82f8cee2-bf6b-49d9-9da9-387388a71dc1

Smartphone

Inshirah23 commented 8 months ago

@vishalgupta8982

The issue resolved in PR vishalgupta8982:Bug-fix/#210-Alignment-Issue-in-Home-Page-Tags-on-Android-and-iOS-when-Switching-Language-to-Deutsche seems to work fine on devices with larger width only. Its still not working when text exceeds on small width devices. I made another issue for this and assigning you. One way to implement this is to wrap text to next line when certain limit exceeds no matter which language is selected. You can set width limit based on English language. If you have any other better approach to implement this, you are free to discuss. Thanks

vishalgupta8982 commented 6 months ago

Delighted to fix GitHub issue, ready for further collaboration!

Inshirah23 commented 6 months ago

Delighted to fix GitHub issue, ready for further collaboration!

Sure, thanks