[Layouts] Fix layout issues with longer translations in multiple views #19356
Description
Description:
Several UI components are not responsive to longer text (e.g. Spanish translations). When the text exceeds the length of the original English copy, it overflows, is cut off, or goes out of the visual boundaries of the component. The affected areas need layout adjustments to properly support longer translations.
Affected areas & issues
1. Advanced view → WakuV2 options
- In Advanced view, under WakuV2 options, the text for some options is longer in Spanish than in English.
- The current layout is not responsive: the text goes out of component boundaries instead of wrapping or adjusting.
2. Settings → Syncing → “Sync new device” panel
- In Settings → Syncing, the “Sync new device” panel does not handle longer translations correctly.
- When using a longer string (e.g. Spanish), the text is out of boundaries and breaks the layout.
3. Send Modal
- In the Send Modal, when the field is empty and the helper/placeholder text is long, the text goes out of boundaries.
- The component does not shrink, wrap, or adjust properly to the content length.
4. Onboarding → “Help us improve”
- In the Onboarding step “Help us improve”, when the text is longer (e.g. Spanish), it gets cut off.
- The container does not resize or allow wrapping to show the full message.
Expected behavior
For all the affected views:
- Text should wrap correctly or the component should resize to accommodate longer translations.
- No text should be:
- cut off,
- overflowing its container,
- or overlapping with other UI elements.
- Layout should remain visually consistent across languages and screen sizes.
Notes
- Review layout constraints (
Layout.*,elide,wrapMode,implicitWidth/height, etc.) for the affected components. - Test with:
- English (short strings)
- Spanish (longer strings)
- Consider setting a maximum width with wrapping instead of truncation where full text is important for understanding.