Fix/issue 11367 long question UI

[SOUMITRO-SAHA]

Issue for this PR

Closes #11367

Type of change

• Bug fix
• New feature
• Refactor / code improvement
• Documentation

What does this PR do?

This PR fixes a UI issue where long question text in the session question dock would push answer options off-screen, making them inaccessible to users.

Changes made:

1. Dynamic height calculation in session-question-dock.tsx:
   • Enhanced the measure() function to dynamically calculate question text max-height
   • Accounts for header, progress bar, hint, and ensures 200px minimum space for options
   • Uses CSS custom properties (--question-text-max-height) for responsive behavior
2. Scrollable question text area:
   • Added max-height constraint with overflow-y: auto to question text slot
   • Custom scrollbar styling with hover states for better UX
   • Works seamlessly even when custom answer textarea is expanded
3. Performance optimizations:
   • Caches scroller and dock elements to avoid repeated DOM queries
   • Debounced resize handler (100ms) to reduce recalculation frequency
   • Proper cleanup of cached references on unmount
4. Comprehensive E2E tests covering:
   • Long question text with scrolling behavior
   • Multiple tabs with long questions
   • Moderate text (verifies no unnecessary scrolling)
   • Questions with 50+ items
   • Custom answer interaction with long questions

How did you verify your code works?

• Added 5 comprehensive E2E test scenarios in question-scroll.spec.ts that verify scrolling behavior across different question lengths and scenarios
• All tests verify that:
  • Answer options remain visible and clickable
  • Scrolling activates only when content exceeds available space
  • Custom answer functionality works correctly with long questions
  • Navigation between multiple long questions works smoothly

Screenshots / recordings

Before Fix:

After Fix:

2026-03-12.13-27-07.mp4

Detailed Video Demonstration with Responsive Testing – Google Drive

Checklist

• I have tested my changes locally
• I have not included unrelated changes in this PR

[github-actions]

Hey! Your PR title Fix/issue 11367 long question UI doesn't follow conventional commit format.

Please update it to start with one of:

• feat: or feat(scope): new feature
• fix: or fix(scope): bug fix
• docs: or docs(scope): documentation changes
• chore: or chore(scope): maintenance tasks
• refactor: or refactor(scope): code refactoring
• test: or test(scope): adding or updating tests

Where scope is the package name (e.g., app, desktop, opencode).

See CONTRIBUTING.md for details.

[github-actions]

The following comment was made by an LLM, it may be inaccurate:

Results

Potential Related PR Found:

• PR feat(desktop): add expandable option descriptions in session question dock #15253: "feat(desktop): add expandable option descriptions in session question dock"
  • feat(desktop): add expandable option descriptions in session question dock #15253
  • This PR also modifies the session question dock, though it appears to be focused on expandable option descriptions rather than fixing long question text overflow. May be worth reviewing to ensure no conflicts or duplicate efforts in the same component.

Note: The current PR #17160 is the only match for most of the specific searches, indicating this appears to be addressing a unique issue. PR #15253 is the only potentially related PR found that touches the same component area.

[SOUMITRO-SAHA]

If you would like me to implement the fix on the CLI (TUI) as well, please feel free to assign the task to me.

At the moment, I am facing some issues with the scrolling behaviour in the TUI using @opentui/solid. I tried several approaches to handle scrolling, but none of them worked as expected, so I did not include those changes in this PR.

If fixing this is important, could you please share any documentation or references related to scrolling behaviour in the TUI? That would really help me proceed with the implementation.

@adamdotdevin @rekram1-node