Skip to content

fix: Correct AskUserQuestion dialog sizing #444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rjroy merged 1 commit into from
Feb 3, 2026
Merged

fix: Correct AskUserQuestion dialog sizing #444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions .lore/retros/ask-question-dialog-sizing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
11 changes: 6 additions & 5 deletions frontend/src/components/discussion/AskUserQuestionDialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@

.ask-question {
width: 100%;
max-width: 800px;
max-width: 560px;
max-height: 85vh;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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));
}
}