From 34f24e287a8022c5fc79da9624f14a04684bbaf3 Mon Sep 17 00:00:00 2001 From: Ronald Roy Date: Mon, 2 Feb 2026 20:25:05 -0800 Subject: [PATCH] fix: Correct AskUserQuestion dialog sizing for modal vs minimized states Modal dialog stays at 560px for focused interaction. Minimized bar gets 800px max-width and centered positioning to match the message area width on desktop. Co-Authored-By: Claude Opus 4.5 --- .lore/retros/ask-question-dialog-sizing.md | 32 +++++++++++++++++++ .../discussion/AskUserQuestionDialog.css | 11 ++++--- 2 files changed, 38 insertions(+), 5 deletions(-) create mode 100644 .lore/retros/ask-question-dialog-sizing.md diff --git a/.lore/retros/ask-question-dialog-sizing.md b/.lore/retros/ask-question-dialog-sizing.md new file mode 100644 index 00000000..25cd30bc --- /dev/null +++ b/.lore/retros/ask-question-dialog-sizing.md @@ -0,0 +1,32 @@ +--- +title: Match dialog display area to page context +date: 2026-02-02 +status: complete +tags: [css, ui, responsive, dialog, communication] +modules: [ask-user-question-dialog] +--- + +# Retro: AskUserQuestion Dialog Sizing Fix + +## Summary + +Fixed CSS sizing for AskUserQuestion dialog components. The modal dialog (`.ask-question`) was incorrectly changed to 800px max-width when it should have stayed at 560px. The minimized bar (`.ask-question--minimized`) needed to be 800px and centered on desktop. + +## What Went Well + +- Quick identification and fix once requirements were clarified +- Mobile styling already looked correct, only desktop needed adjustment + +## What Could Improve + +- Original request was ambiguous ("the dialog" could mean either the modal or the minimized bar) +- Should have asked clarifying questions before making the initial change + +## Lessons Learned + +- When working on UI components with multiple states (expanded/minimized), clarify which state needs modification +- Match the display context: the minimized bar sits alongside the message area (800px), while the modal is a focused dialog (560px) + +## Artifacts + +None (quick fix, no prior spec/plan) diff --git a/frontend/src/components/discussion/AskUserQuestionDialog.css b/frontend/src/components/discussion/AskUserQuestionDialog.css index cb702c04..d0d1bfac 100644 --- a/frontend/src/components/discussion/AskUserQuestionDialog.css +++ b/frontend/src/components/discussion/AskUserQuestionDialog.css @@ -28,7 +28,7 @@ .ask-question { width: 100%; - max-width: 800px; + max-width: 560px; max-height: 85vh; display: flex; flex-direction: column; @@ -299,8 +299,10 @@ /* Minimized state - compact bar at bottom */ .ask-question--minimized { position: fixed; - left: var(--spacing-md); - right: var(--spacing-md); + left: 50%; + transform: translateX(-50%); + width: calc(100% - var(--spacing-md) * 2); + max-width: 800px; bottom: calc(var(--input-area-height, 80px) + var(--spacing-md)); z-index: 200; display: flex; @@ -344,8 +346,7 @@ /* On mobile, position above the fixed input area */ @media (max-width: 767px) { .ask-question--minimized { - left: var(--spacing-sm); - right: var(--spacing-sm); + width: calc(100% - var(--spacing-sm) * 2); bottom: calc(var(--input-area-height, 70px) + var(--spacing-sm)); } }