Repository navigation
feat(dashboard): refine responsive audit workspace - #653
Conversation
📝 WalkthroughWalkthroughThe dashboard now supports resizable, persisted sidebar widths with pointer and keyboard controls. Audit logs use responsive container layouts, continuous conversation-panel bounds, fullscreen drawer accessibility, single-entry expansion, and updated interaction controls. ChangesAudit dashboard interactions
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant Sidebar
participant SidebarStore
participant Document
User->>Sidebar: Drag or use keyboard on resize separator
Sidebar->>SidebarStore: Set clamped width
SidebarStore->>Document: Update --sidebar-width
SidebarStore-->>Sidebar: Render updated width
sequenceDiagram
participant User
participant AuditEntrySummary
participant ConversationDrawer
participant DashboardShell
User->>AuditEntrySummary: Open conversation
AuditEntrySummary->>ConversationDrawer: Toggle current entry
ConversationDrawer->>DashboardShell: Set inert and aria-hidden in fullscreen
ConversationDrawer-->>User: Render accessible dialog
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/dashboard/tests/conversation-panel.test.js`:
- Around line 28-33: Update the expected maximum width for the 680px viewport in
the test covering conversationPanelBounds and clampConversationPanelWidth from
443 to 442, matching the current implementation while preserving the 679px
assertions.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: c79bf29b-da97-4b5d-aa0f-457592aaeca6
⛔ Files ignored due to path filters (4)
internal/admin/dashboard/static/dist/assets/index-BFUCi3g4.jsis excluded by!**/dist/**internal/admin/dashboard/static/dist/assets/index-Cz8GQupq.cssis excluded by!**/dist/**internal/admin/dashboard/static/dist/assets/index-XgpqSEUI.cssis excluded by!**/dist/**internal/admin/dashboard/static/dist/index.htmlis excluded by!**/dist/**
📒 Files selected for processing (12)
web/dashboard/src/lib/components/organisms/Sidebar.svelteweb/dashboard/src/lib/stores/sidebar-sizing.jsweb/dashboard/src/lib/stores/ui.svelte.jsweb/dashboard/src/pages/audit-logs/AuditEntrySummary.svelteweb/dashboard/src/pages/audit-logs/AuditPane.svelteweb/dashboard/src/pages/audit-logs/ConversationDrawer.svelteweb/dashboard/src/pages/audit-logs/audit-logic.jsweb/dashboard/src/pages/audit-logs/conversation-panel.jsweb/dashboard/src/styles/layout.cssweb/dashboard/tests/audit-list.test.jsweb/dashboard/tests/conversation-panel.test.jsweb/dashboard/tests/sidebar-sizing.test.js
| test("panel bounds stay continuous across the former compact breakpoint", () => { | ||
| assert.deepEqual(conversationPanelBounds(679), { min: 320, max: 442 }); | ||
| assert.deepEqual(conversationPanelBounds(680), { min: 320, max: 443 }); | ||
| assert.equal(clampConversationPanelWidth(520, 679), 442); | ||
| assert.equal(clampConversationPanelWidth(520, 680), 443); | ||
| }); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Fix the expected maximum width at 680px.
Line 30 fails because conversationPanelBounds(680) returns { min: 320, max: 442 }. Line 32 fails for the same reason.
Proposed fix
- assert.deepEqual(conversationPanelBounds(680), { min: 320, max: 443 });
+ assert.deepEqual(conversationPanelBounds(680), { min: 320, max: 442 });
@@
- assert.equal(clampConversationPanelWidth(520, 680), 443);
+ assert.equal(clampConversationPanelWidth(520, 680), 442);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| test("panel bounds stay continuous across the former compact breakpoint", () => { | |
| assert.deepEqual(conversationPanelBounds(679), { min: 320, max: 442 }); | |
| assert.deepEqual(conversationPanelBounds(680), { min: 320, max: 443 }); | |
| assert.equal(clampConversationPanelWidth(520, 679), 442); | |
| assert.equal(clampConversationPanelWidth(520, 680), 443); | |
| }); | |
| test("panel bounds stay continuous across the former compact breakpoint", () => { | |
| assert.deepEqual(conversationPanelBounds(679), { min: 320, max: 442 }); | |
| assert.deepEqual(conversationPanelBounds(680), { min: 320, max: 442 }); | |
| assert.equal(clampConversationPanelWidth(520, 679), 442); | |
| assert.equal(clampConversationPanelWidth(520, 680), 442); | |
| }); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@web/dashboard/tests/conversation-panel.test.js` around lines 28 - 33, Update
the expected maximum width for the 680px viewport in the test covering
conversationPanelBounds and clampConversationPanelWidth from 443 to 442,
matching the current implementation while preserving the 679px assertions.
|
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Confidence Score: 5/5The audited live Interactions behavior preserves and updates the selected conversation even when audit-list filters suppress visual insertion. The focused execution used the production live merge, normalized audit-record cache, conversation rendering, and selected-anchor hydration logic, and observed the expected partial-to-final response transition. No actionable defects remain. Files Needing Attention: No files need follow-up changes.
 T-Rex LogsWhat T-Rex did
Reviews (1): Last reviewed commit: "feat(dashboard): refine responsive audit..." | Re-trigger Greptile |
Summary
Testing
Summary by CodeRabbit
New Features
Bug Fixes