fix(web): contain long plan reviews

packages/client/ui-question/src/client/QuestionComposer.module.css

@@ -67,7 +67,7 @@
 }
 
 .detail {
-  margin: 2px 0 0;
+  margin: 0 2px 8px;
   color: var(--dsw-alias-label-tertiary);
   font-size: 13px;
   line-height: 20px;
@@ -113,13 +113,19 @@
   cursor: default;
 }
 
+.body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
 .options {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  /* The scrollable region of the capped card (ChatView list pattern). */
-  min-height: 0;
-  overflow-y: auto;
 }
 
 .option {

packages/client/ui-question/src/client/QuestionComposer.tsx

@@ -171,7 +171,6 @@ function QuestionFlow({ pending }: { pending: PendingQuestion }) {
                 : question.question}</span>
               {question.multiSelect === true && <span className={css.multiSelectHint}>可多选</span>}
             </h2>
-            {question.detail !== undefined && <p className={css.detail}>{question.detail}</p>}
           </div>
           <div className={css.headerActions}>
             <span className={css.progress}>{index + 1} / {questions.length}</span>
@@ -199,79 +198,82 @@ function QuestionFlow({ pending }: { pending: PendingQuestion }) {
           </div>
         </header>
 
-        <div className={css.options} role={question.multiSelect === true ? 'group' : 'radiogroup'}>
-          {(question.options ?? []).map((option, optionIndex) => {
-            const selected = draft.selected.includes(option.label)
-            const display = parseRecommendedLabel(option.label)
-            return (
-              <button
-                type="button" key={`${option.label}-${String(optionIndex)}`}
-                className={clsx(css.option, selected && css.optionSelected)}
-                role={question.multiSelect === true ? 'checkbox' : 'radio'}
-                aria-checked={selected}
-                aria-label={display.label}
-                disabled={busy !== null}
-                onClick={() => { choose(option.label) }}
-                onKeyDown={(event) => {
-                  if (event.key !== 'Enter' || !drafts.every(completed)) return
-                  event.preventDefault()
-                  submitDrafts(drafts)
-                }}
-              >
-                <span className={css.number}>{optionIndex + 1}</span>
-                <span className={css.optionCopy}>
-                  <span className={css.optionLine}>
-                    <span className={css.optionLabel}>{display.label}</span>
-                    {display.recommended && <span className={css.badge}>推荐</span>}
-                    {option.description !== undefined && (
-                      <span className={css.description}>{option.description}</span>
-                    )}
-                  </span>
-                </span>
-                <span className={css.choiceIcon}>
-                  {selected ? <IconCheckOutline16 /> : <IconChevronRightOutline14 />}
-                </span>
-              </button>
-            )
-          })}
-
-          <div className={clsx(
-            css.custom,
-            draft.customOpen && css.customOpen,
-            !hasOptions && css.customOptionless,
-          )}>
-            {hasOptions && (
-              <button
-                type="button" className={css.customTrigger}
-                disabled={busy !== null} onClick={openCustom}
-                aria-expanded={draft.customOpen}
-              >
-                <span className={css.number}><IconEditOutline16 /></span>
-                <span>其他，请填写自定义答案</span>
-              </button>
-            )}
-            {draft.customOpen && (
-              <textarea
-                autoFocus
-                className={css.customInput}
-                value={draft.custom}
-                disabled={busy !== null}
-                rows={2}
-                placeholder="输入你的答案"
-                onChange={(event) => {
-                  const value = event.target.value
-                  updateDraft(current => ({
-                    ...current, selected: [], custom: value, customOpen: true, skipped: false,
-                  }))
-                }}
-                onKeyDown={(event) => {
-                  if (event.key === 'Enter' && !event.shiftKey && !isComposing(event)) {
+        <div className={css.body} data-question-scroll>
+          {question.detail !== undefined && <p className={css.detail}>{question.detail}</p>}
+          <div className={css.options} role={question.multiSelect === true ? 'group' : 'radiogroup'}>
+            {(question.options ?? []).map((option, optionIndex) => {
+              const selected = draft.selected.includes(option.label)
+              const display = parseRecommendedLabel(option.label)
+              return (
+                <button
+                  type="button" key={`${option.label}-${String(optionIndex)}`}
+                  className={clsx(css.option, selected && css.optionSelected)}
+                  role={question.multiSelect === true ? 'checkbox' : 'radio'}
+                  aria-checked={selected}
+                  aria-label={display.label}
+                  disabled={busy !== null}
+                  onClick={() => { choose(option.label) }}
+                  onKeyDown={(event) => {
+                    if (event.key !== 'Enter' || !drafts.every(completed)) return
                     event.preventDefault()
-                    continueFlow()
-                  }
-                }}
-              />
-            )}
+                    submitDrafts(drafts)
+                  }}
+                >
+                  <span className={css.number}>{optionIndex + 1}</span>
+                  <span className={css.optionCopy}>
+                    <span className={css.optionLine}>
+                      <span className={css.optionLabel}>{display.label}</span>
+                      {display.recommended && <span className={css.badge}>推荐</span>}
+                      {option.description !== undefined && (
+                        <span className={css.description}>{option.description}</span>
+                      )}
+                    </span>
+                  </span>
+                  <span className={css.choiceIcon}>
+                    {selected ? <IconCheckOutline16 /> : <IconChevronRightOutline14 />}
+                  </span>
+                </button>
+              )
+            })}
+
+            <div className={clsx(
+              css.custom,
+              draft.customOpen && css.customOpen,
+              !hasOptions && css.customOptionless,
+            )}>
+              {hasOptions && (
+                <button
+                  type="button" className={css.customTrigger}
+                  disabled={busy !== null} onClick={openCustom}
+                  aria-expanded={draft.customOpen}
+                >
+                  <span className={css.number}><IconEditOutline16 /></span>
+                  <span>其他，请填写自定义答案</span>
+                </button>
+              )}
+              {draft.customOpen && (
+                <textarea
+                  autoFocus
+                  className={css.customInput}
+                  value={draft.custom}
+                  disabled={busy !== null}
+                  rows={2}
+                  placeholder="输入你的答案"
+                  onChange={(event) => {
+                    const value = event.target.value
+                    updateDraft(current => ({
+                      ...current, selected: [], custom: value, customOpen: true, skipped: false,
+                    }))
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' && !event.shiftKey && !isComposing(event)) {
+                      event.preventDefault()
+                      continueFlow()
+                    }
+                  }}
+                />
+              )}
+            </div>
           </div>
         </div>