Warranty Card UI: Improve Responsiveness and Text Overflow Handling for Multi-Language Support

[AlgoFoe]

Describe the bug
The warranty card UI encounters issues with layout and text overflow when displayed in different languages or on smaller screens. When certain languages are selected, text length increases, causing overflow outside the container. Additionally, the layout lacks proper responsiveness, leading to overlapping or misaligned elements on smaller screens.

To Reproduce
Steps to reproduce the behavior:

1. In the assets section, select any asset.
2. Change the language to one with longer text, such as Tamil.
3. View the warranty card on various screen sizes, particularly smaller screens.
4. Notice any text overflow and layout issues.

Expected behavior
The warranty card should adjust to accommodate different languages and screen sizes. Text should wrap properly, and elements should align responsively without overflow or overlapping.

Screenshots

https://github.com/user-attachments/assets/576bc706-c8b8-44a9-ab6d-4b0ad52c56fe

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Version: 130

Smartphone (please complete the following information):

• Device: iPhone XR
• Browser: Chrome
• Version: 130

Additional context
Further work is needed to ensure the warranty card UI is fully responsive, with text wrap and layout adjustments for improved language support and responsiveness across different screen sizes.

[AlgoFoe]

@Jacobjeevan can u assign me this issue, so I can start working on it.

[Jacobjeevan]

@AlgoFoe Any updates with this?

Try to salvage the existing PR/see if you can update it.

[modamaan]

@Jacobjeevan i would like to take it up