I’m designing an avatar component that needs to be responsive to varying text lengths. The component includes:
- An avatar image,
- Job site,
- User’s assigned role,
- An icon button for a dropdown menu.
I want the component to:
- Resize based on text length, with a minimum and maximum width.
- Truncate text once the maximum width is reached, but hug the text until then.
Currently, I’ve set up Auto Layout for responsive resizing and am using “Hug contents” for initial flexibility. I’m experimenting with a nested frame to enforce the max-width and have applied truncation to the text, but I’d love insights from anyone who’s successfully implemented similar constraints in their designs.
Any tips or recommendations for better handling this setup? Thanks in advance for your advice!