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.
- 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.
- 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.
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.
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:
In the grid view the spacing is slightly better, but both views must be aligned visually and functionally.
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
Design Goal
Create a revised layout for Operator cards that ensures proper text visibility, balanced spacing, and responsive behavior across all call states.