marthaegrimaldi / marthaegrimaldi/ifood-clone-using-react-native
Header Overlapping in Enatega Restaurant App Across Multiple Languages
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 0
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
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
Launch the Enatega Restaurant App.
Change the language setting to Swedish, Deutsche, Thai, or French.
Navigate to the homepage.
Click on a specific header, such as "Orders."
Observe that the selected header partially overlaps with other headers, such as "Processing."
Expected behavior
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.
Each header should maintain its position and visibility without being obstructed by other UI elements.
Screenshots
screen-20240307-163827.mp4
**Smartphone **
Device: IOS & Android.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the homepage issue in the Enatega Restaurant App on iOS or Android using Swedish, German, Thai, and French. Inspect the homepage header or tab implementation and compare the Orders and Processing states; done means each header remains visible and does not overlap in every listed language.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- frontend, internationalization, mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100