gray-mueller / gray-mueller/full-stack-document-solution
Enatega Customer + Admin Dashboard : Cuisine names are overflowing beyond the image square's boundary, breaking the UI.
- Langage dominant
- TypeScript
- Étoiles
- 0
- Forks
- 0
- Métriques de merge des PR
- Aucune PR mergée en 30 j
Description
Describe the bug
Cuisine names are overflowing beyond the image square's boundary, breaking the UI. Also restrict the user to enter cuisine names with some words limits so it should not breaks the boundary.
To Reproduce
Steps to reproduce the behavior:
Go to Enatega Customer application
Click on 'Restaurants' menu button.
Now see at the Top of screen restaurants see error Browse categories scroll-bar where Cuisine names are overflowing beyond the image square's boundary, breaking the UI.
Also restrict the user to enter cuisine names with some words limits so it should not breaks the boundary.
Expected behavior
The cuisine names should stay within the image square and not overflow.
If the text is too long, it should either wrap properly or be truncated with "...".
The design should remain responsive for different screen sizes.
Screenshots
Image
Image
Desktop (please complete the following information):
OS: [e.g. Windows 11]
Browser [e.g. chrome,]
Version [e.g. Latest]
Smartphone (please complete the following information):
Device: [e.g. Infinix Hot 50]
OS: [e.g. Android]
Browser [e.g. Application]
Version [e.g. 14]
Additional context
Add any other context about the problem here.
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez dans l’application Enatega Customer en ouvrant Restaurants et en inspectant la zone Browse categories en haut de l’écran. Reproduisez le débordement des noms de cuisines à différentes tailles d’écran, puis identifiez le composant responsable de la disposition de l’image et du libellé de la cuisine. Le travail est terminé lorsque les noms longs restent dans le carré de l’image en étant renvoyés à la ligne ou tronqués, et que les limites du nombre d’entrées de cuisine empêchent le problème.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- typescript
- Domaine
- frontend, web-dev
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 42/100