fix: rework queue/agent card layout and sizing - #10
Open
nicomiguelino wants to merge 1 commit into
Open
Conversation
- Fixed card counts (3 queues, 6/4 agents) with CSS-driven fitting instead of JS measurement, fixing orientation-resize and flaky card-disappearing bugs - Agent status shown as a colored-dot pill instead of tile-wide color - Consistent gaps, border radius, and space allocation between queue cards and agent tiles - Narrower chart bars - Regenerate screenshots
There was a problem hiding this comment.
Pull request overview
Reworks the dashboard’s queue/agent card layout to use fixed counts and CSS-driven sizing, and simplifies queue cards to focus on charts while adjusting visual styling (gaps, rounding, status indicator, chart bars).
Changes:
- Update queue charts to reuse an existing Chart.js instance and narrow bars.
- Render fixed numbers of queue cards (3) and agent tiles (6), with portrait-mode hiding via CSS.
- Restyle queue/agent cards (rounded corners, spacing) and change agent status to a dot + pill.
Reviewed changes
Copilot reviewed 9 out of 19 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/templates/queue-chart.ts | Reuse existing Chart.js instance; adjust dataset and bar sizing. |
| src/templates/queue-card.ts | Simplify queue card content and cap rendered queue cards. |
| src/templates/index.ts | Remove locale argument plumbing for rendering. |
| src/templates/agent-tile.ts | Cap rendered agent tiles and switch to dot + pill status markup. |
| src/style.css | Update component styling (rounding, spacing, truncation, status pill/dot). |
| src/main.ts | Remove locale retrieval; call refresh without locale. |
| src/dashboard.ts | Update refresh() to no longer accept locale; adjust render call. |
| src/dashboard.test.ts | Update tests to match new refresh/render signatures. |
| index.html | Update layout classes, spacing, and portrait-mode hiding rules. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
26
to
28
| .queue-card-title { | ||
| @apply text-5xl font-semibold; | ||
| } | ||
|
|
||
| .queue-card-stats { | ||
| @apply grid grid-cols-2 gap-x-4 gap-y-2 text-2xl; | ||
| } | ||
|
|
||
| .queue-card-stats dt { | ||
| @apply text-neutral-400; | ||
| } | ||
|
|
||
| .queue-card-stats dd { | ||
| @apply text-right font-medium; | ||
| @apply min-h-28 text-5xl leading-tight font-semibold; | ||
| } |
| <section | ||
| id="queue-cards" | ||
| class="grid grid-cols-3 gap-4 portrait:grid-cols-1" | ||
| class="grid min-h-0 flex-[3] auto-rows-fr grid-cols-3 gap-8 overflow-hidden portrait:grid-cols-1 [&>:nth-child(n+3)]:portrait:hidden" |
Comment on lines
9
to
11
| <div class="queue-card"> | ||
| <h2 class="queue-card-title">${queue.description}</h2> | ||
| <dl class="queue-card-stats"> | ||
| <dt>Ready</dt> | ||
| <dd>${number.format(queue.agentsReady)}</dd> | ||
| <dt>Logged On</dt> | ||
| <dd>${number.format(queue.agentsLoggedOn)}</dd> | ||
| <dt>In Queue</dt> | ||
| <dd>${number.format(queue.queueSize)}</dd> | ||
| <dt>SLA</dt> | ||
| <dd>${number.format(queue.sla)}%</dd> | ||
| <dt>Offered</dt> | ||
| <dd>${number.format(queue.callsOfferedToday)}</dd> | ||
| <dt>Answered</dt> | ||
| <dd>${number.format(queue.callsAnsweredToday)}</dd> | ||
| <dt>Avg Wait</dt> | ||
| <dd>${formatDuration(queue.waitTimeAverageSeconds)}</dd> | ||
| <dt>Max Wait</dt> | ||
| <dd>${formatDuration(queue.waitTimeMaxSeconds)}</dd> | ||
| </dl> | ||
| <div class="queue-card-title">${queue.description}</div> | ||
| <div class="queue-card-chart" id="queue-chart-${queue.id}"></div> |
Comment on lines
+12
to
+16
| <span | ||
| class="agent-tile-status-dot ${agentStatusColor( | ||
| agent.contactCentreStatus, | ||
| )}" | ||
| ></span> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary