Design: Improve operator card layout in Operators section

[AmaLuci]

Design: Improve operator card layout in Operators section

The Operators section of NethVoice CTI has layout issues in the compact Operator card view that significantly impact readability during call states.

1. Caller name too constrained during incoming/active calls
   When a call is incoming (queue or direct), the card doesn't display the caller’s name along with the “Pick up” and “Reject” actions.
   When a call is active (queue or direct), the horizontal space allocated to the caller name is too limited, causing:

• Text overflow
• Caller name wrapping underneath UI elements
• Reduced readability, making it difficult for users to identify the caller during critical moments

In the grid view the spacing is slightly better, but both views must be aligned visually and functionally.

2. Operator name truncated excessively during calls
   When the caller name appears, the operator’s name loses horizontal space and becomes truncated too aggressively.
   On smaller screens, many operator cards show names like “Mar…”, “Mar…”, “Mar…”, making it impossible to distinguish operators at a glance.

Expected behavior

• Caller and operator names must remain readable at all times
• No overlapping, disappearing, or misaligned text
• Card view and grid view must be visually consistent
• Layout must adapt gracefully based on call state (idle, ringing, active)

Design Goal
Create a revised layout for Operator cards that ensures proper text visibility, balanced spacing, and responsive behavior across all call states.

[AmaLuci]

Mockups ready in Figma