From 832573e10975523a1b85e5219c872f8a19e96805 Mon Sep 17 00:00:00 2001
From: Peanut-Puff <97236799+Peanut-Puff@users.noreply.github.com>
Date: Mon, 17 Aug 2026 11:15:39 +0800
Subject: [PATCH] fix(web): keep feedback dialog within window bounds

---
 .../FeedbackDialog/FeedbackDialog.scss        | 69 ++++++++-----------
 .../FeedbackDialog/FeedbackDialog.tsx         | 46 +++++++------
 .../feedbackSubmissionContract.test.ts        | 54 +++++++++++++--
 .../components/Modal/Modal.test.tsx           | 43 ++++++++++++
 .../components/Modal/Modal.tsx                | 40 +++++++----
 .../components/Modal/index.ts                 |  2 +-
 6 files changed, 177 insertions(+), 77 deletions(-)

diff --git a/src/web-ui/src/app/components/FeedbackDialog/FeedbackDialog.scss b/src/web-ui/src/app/components/FeedbackDialog/FeedbackDialog.scss
index 8f324112f0..76e2fb731d 100644
--- a/src/web-ui/src/app/components/FeedbackDialog/FeedbackDialog.scss
+++ b/src/web-ui/src/app/components/FeedbackDialog/FeedbackDialog.scss
@@ -1,11 +1,7 @@
 .bitfun-feedback__overlay {
-  padding: 48px 40px 32px;
-}
+  --bitfun-feedback-modal-max-height: calc(100vh - 80px);
 
-.bitfun-feedback__overlay .modal {
-  width: min(960px, calc(100vw - 80px));
-  max-width: min(960px, calc(100vw - 80px));
-  max-height: calc(100vh - 80px);
+  padding: 48px clamp(12px, 5.882vw, 40px) 32px;
 }
 
 .bitfun-feedback__modal-content {
@@ -15,9 +11,7 @@
 }
 
 .bitfun-feedback__root {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
+  width: 100%;
   min-width: 0;
   min-height: 0;
 }
@@ -29,7 +23,8 @@
   width: 100%;
   min-width: 0;
   min-height: 0;
-  height: min(620px, calc(100vh - 114px));
+  height: calc(100vh - 114px);
+  max-height: 620px;
 }
 
 .bitfun-feedback__view-switch {
@@ -84,7 +79,7 @@
   flex-direction: column;
   gap: 18px;
   min-height: 0;
-  padding: 22px 26px 24px;
+  padding: 22px clamp(18px, 3.824vw, 26px) 24px;
   overflow-y: auto;
 }
 
@@ -192,26 +187,31 @@
 .bitfun-feedback__actions {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 10px;
+  width: 100%;
+  min-width: 0;
   margin-top: auto;
 
   .btn {
+    flex-shrink: 0;
     min-width: 96px;
   }
 }
 
-.bitfun-feedback__action-spacer {
-  flex: 1;
+.bitfun-feedback__primary-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
 }
 
 .bitfun-feedback__complete {
   display: flex;
-  flex: 1;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
   gap: 12px;
-  min-height: min(460px, 64vh);
   padding: 32px;
   color: var(--bf-appearance-token-color-text-secondary);
   text-align: center;
@@ -626,36 +626,27 @@
   }
 }
 
-@media (max-width: 680px), (max-height: 540px) {
+@media (max-width: 680px) {
   .bitfun-feedback__overlay {
-    padding: 44px 12px 12px;
+    padding-right: clamp(12px, 5.882vw, 40px);
+    padding-left: clamp(12px, 5.882vw, 40px);
   }
 
-  .bitfun-feedback__overlay .modal {
-    width: calc(100vw - 24px);
-    max-width: calc(100vw - 24px);
-    max-height: calc(100vh - 56px);
-  }
-
-  .bitfun-feedback__center {
-    height: calc(100vh - 90px);
-  }
-
-  .bitfun-feedback__form {
-    padding: 18px;
-  }
-
-  .bitfun-feedback__privacy,
-  .bitfun-feedback__actions {
-    align-items: stretch;
+  .bitfun-feedback__privacy {
+    align-items: center;
     flex-wrap: wrap;
   }
+}
 
-  .bitfun-feedback__privacy {
-    align-items: center;
+@media (max-height: 540px) {
+  .bitfun-feedback__overlay {
+    --bitfun-feedback-modal-max-height: calc(100vh - 56px);
+
+    padding-top: 44px;
+    padding-bottom: 12px;
   }
 
-  .bitfun-feedback__action-spacer {
-    display: none;
+  .bitfun-feedback__center {
+    height: calc(100vh - 90px);
   }
 }
diff --git a/src/web-ui/src/app/components/FeedbackDialog/FeedbackDialog.tsx b/src/web-ui/src/app/components/FeedbackDialog/FeedbackDialog.tsx
index dd04642e4b..c8cef9bd74 100644
--- a/src/web-ui/src/app/components/FeedbackDialog/FeedbackDialog.tsx
+++ b/src/web-ui/src/app/components/FeedbackDialog/FeedbackDialog.tsx
@@ -311,6 +311,11 @@ export const FeedbackDialog: React.FC<FeedbackDialogProps> = ({ isOpen, onClose
         onClose={requestClose}
         title={t('header.feedback')}
         size="xlarge"
+        dimensions={{
+          width: '100%',
+          maxWidth: completed ? 560 : 960,
+          maxHeight: 'var(--bitfun-feedback-modal-max-height)',
+        }}
         overlayClassName="bitfun-feedback__overlay"
         contentClassName="bitfun-feedback__modal-content"
         showCloseButton={!submitting && !replyState.sending}
@@ -430,26 +435,27 @@ export const FeedbackDialog: React.FC<FeedbackDialogProps> = ({ isOpen, onClose
                 <ExternalLink size={15} aria-hidden="true" />
                 {t('feedback.actions.gitcode')}
               </Button>
-              <span className="bitfun-feedback__action-spacer" />
-              <Button
-                type="button"
-                variant="secondary"
-                disabled={submitting}
-                onClick={requestClose}
-              >
-                {t('feedback.actions.cancel')}
-              </Button>
-              <Button
-                type="submit"
-                disabled={!canSubmit}
-                isLoading={submitting}
-                data-testid="feedback-submit"
-              >
-                <Send size={15} aria-hidden="true" />
-                {submitError instanceof FeedbackApiError && submitError.retryable
-                  ? t('feedback.actions.retry')
-                  : t('feedback.actions.submit')}
-              </Button>
+              <div className="bitfun-feedback__primary-actions">
+                <Button
+                  type="button"
+                  variant="secondary"
+                  disabled={submitting}
+                  onClick={requestClose}
+                >
+                  {t('feedback.actions.cancel')}
+                </Button>
+                <Button
+                  type="submit"
+                  disabled={!canSubmit}
+                  isLoading={submitting}
+                  data-testid="feedback-submit"
+                >
+                  <Send size={15} aria-hidden="true" />
+                  {submitError instanceof FeedbackApiError && submitError.retryable
+                    ? t('feedback.actions.retry')
+                    : t('feedback.actions.submit')}
+                </Button>
+              </div>
             </div>
               </form>
             ) : (
diff --git a/src/web-ui/src/app/components/FeedbackDialog/feedbackSubmissionContract.test.ts b/src/web-ui/src/app/components/FeedbackDialog/feedbackSubmissionContract.test.ts
index b7105290e1..92a3b211ec 100644
--- a/src/web-ui/src/app/components/FeedbackDialog/feedbackSubmissionContract.test.ts
+++ b/src/web-ui/src/app/components/FeedbackDialog/feedbackSubmissionContract.test.ts
@@ -1,5 +1,6 @@
 import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
+import { compile } from 'sass';
 import { describe, expect, it } from 'vitest';
 
 const readSource = (relativePath: string): string =>
@@ -67,14 +68,22 @@ describe('OpenHarmony feedback submission contract', () => {
 
   it('shows a single completion action after capability-backed success', () => {
     const dialog = readSource('./FeedbackDialog.tsx');
+    const styles = readSource('./FeedbackDialog.scss');
     const completeView = dialog.slice(
       dialog.indexOf('className="bitfun-feedback__complete"'),
       dialog.indexOf(') : (\n          <div ref={containerRef}'),
     );
+    const completeStyles = styles.slice(
+      styles.indexOf('.bitfun-feedback__complete {'),
+      styles.indexOf('.bitfun-feedback__inbox-layout {'),
+    );
 
     expect(completeView).toContain("t('shared:statuses.done')");
     expect(completeView).not.toContain('openGitCode');
     expect(completeView).not.toContain('feedback-submit');
+    expect(dialog).toContain('maxWidth: completed ? 560 : 960');
+    expect(completeStyles).not.toContain('min-height:');
+    expect(completeStyles).not.toContain('flex: 1;');
   });
 
   it('does not present an invalid zero-second quota retry', () => {
@@ -102,13 +111,48 @@ describe('OpenHarmony feedback submission contract', () => {
   });
 
   it('keeps the dialog below the host window controls at every supported size', () => {
+    const stylesheetPath = fileURLToPath(new URL('./FeedbackDialog.scss', import.meta.url));
+    const dialog = readSource('./FeedbackDialog.tsx');
     const styles = readSource('./FeedbackDialog.scss');
+    const builtStyles = compile(stylesheetPath).css;
+    const actionStyles = styles.slice(
+      styles.indexOf('.bitfun-feedback__actions {'),
+      styles.indexOf('.bitfun-feedback__complete {'),
+    );
 
-    expect(styles).toContain('padding: 48px 40px 32px;');
-    expect(styles).toContain('width: min(960px, calc(100vw - 80px));');
-    expect(styles).toContain('height: min(620px, calc(100vh - 114px));');
-    expect(styles).toContain('padding: 44px 12px 12px;');
-    expect(styles).toContain('max-height: calc(100vh - 56px);');
+    expect(styles).toContain('padding: 48px clamp(12px, 5.882vw, 40px) 32px;');
+    expect(styles).toContain('padding: 22px clamp(18px, 3.824vw, 26px) 24px;');
+    expect(dialog).toContain('dimensions={{');
+    expect(dialog).toContain("width: '100%'");
+    expect(dialog).toContain('maxWidth: completed ? 560 : 960');
+    expect(dialog).toContain("maxHeight: 'var(--bitfun-feedback-modal-max-height)'");
+    expect(styles).toContain('--bitfun-feedback-modal-max-height: calc(100vh - 80px);');
+    expect(styles).toContain('height: calc(100vh - 114px);');
+    expect(styles).toContain('max-height: 620px;');
+    expect(styles).toContain('.bitfun-feedback__root {\n  width: 100%;');
+    expect(styles).not.toContain('.bitfun-feedback__overlay > .modal');
+    expect(styles).not.toContain('min(960px, calc(100vw - 80px))');
+    expect(styles).not.toContain('min(620px, calc(100vh - 114px))');
+    expect(builtStyles).toContain('padding: 48px clamp(12px, 5.882vw, 40px) 32px;');
+    expect(builtStyles).toContain('height: calc(100vh - 114px);');
+    expect(builtStyles).not.toContain('min(960px, 100vw - 80px)');
+    expect(builtStyles).not.toContain('min(620px, 100vh - 114px)');
+    expect(styles).toContain('@media (max-width: 680px) {');
+    expect(styles).toContain('@media (max-height: 540px) {');
+    expect(styles).toContain('--bitfun-feedback-modal-max-height: calc(100vh - 56px);');
+    expect(styles).toContain('padding-top: 44px;');
+    expect(styles).toContain('padding-bottom: 12px;');
+    expect(dialog).toContain('<div className="bitfun-feedback__primary-actions">');
+    expect(dialog).not.toContain('bitfun-feedback__action-spacer');
+    expect(actionStyles).toContain('display: flex;');
+    expect(actionStyles).toContain('flex-wrap: wrap;');
+    expect(actionStyles).toContain('width: 100%;');
+    expect(actionStyles).toContain('min-width: 0;');
+    expect(actionStyles).toContain('.bitfun-feedback__primary-actions {');
+    expect(actionStyles).toContain('flex-shrink: 0;');
+    expect(actionStyles).toContain('margin-left: auto;');
+    expect(actionStyles).not.toContain('grid-template-columns:');
+    expect(styles).not.toContain('@media (max-width: 460px)');
   });
 
   it('keeps Mock request logs limited to a fixed stage and request id', () => {
diff --git a/src/web-ui/src/component-library/components/Modal/Modal.test.tsx b/src/web-ui/src/component-library/components/Modal/Modal.test.tsx
index f57e647e8e..dd5c108700 100644
--- a/src/web-ui/src/component-library/components/Modal/Modal.test.tsx
+++ b/src/web-ui/src/component-library/components/Modal/Modal.test.tsx
@@ -26,6 +26,10 @@ describe('Modal behavior', () => {
 
   afterEach(() => {
     act(() => root.unmount());
+    document.querySelectorAll('style[data-bf-appearance-runtime="test"]')
+      .forEach(style => style.remove());
+    document.documentElement.removeAttribute('data-bf-appearance');
+    document.documentElement.removeAttribute('data-bf-appearance-revision');
     container.remove();
     vi.useRealTimers();
     vi.restoreAllMocks();
@@ -90,6 +94,45 @@ describe('Modal behavior', () => {
     expect(document.body.querySelector('.modal--exiting')).toBeNull();
   });
 
+  it('keeps instance dimensions above late Appearance size rules', () => {
+    act(() => {
+      root.render(
+        <Modal
+          isOpen
+          onClose={vi.fn()}
+          size="xlarge"
+          dimensions={{
+            width: '100%',
+            maxWidth: 960,
+            maxHeight: 'calc(100vh - 80px)',
+          }}
+        >
+          Content
+        </Modal>,
+      );
+    });
+
+    const runtimeStyle = document.createElement('style');
+    runtimeStyle.setAttribute('data-bf-appearance-runtime', 'test');
+    runtimeStyle.textContent = `
+      :root[data-bf-appearance="builtin"][data-bf-appearance-revision="7"]
+      [data-bf-component="modal"][data-bf-part="dialog"][data-bf-size="xlarge"] {
+        width: 100%;
+        max-width: 720px;
+        max-height: 100%;
+      }
+    `;
+    document.documentElement.setAttribute('data-bf-appearance', 'builtin');
+    document.documentElement.setAttribute('data-bf-appearance-revision', '7');
+    document.head.appendChild(runtimeStyle);
+
+    const dialog = document.body.querySelector<HTMLElement>('[role="dialog"]');
+    expect(dialog?.style.width).toBe('100%');
+    expect(dialog?.style.maxWidth).toBe('960px');
+    expect(dialog?.style.maxHeight).toBe('calc(100vh - 80px)');
+    expect(dialog ? getComputedStyle(dialog).maxWidth : null).toBe('960px');
+  });
+
   it('closes only when the pointer press and release both occur on the overlay', () => {
     const onClose = vi.fn();
     act(() => {
diff --git a/src/web-ui/src/component-library/components/Modal/Modal.tsx b/src/web-ui/src/component-library/components/Modal/Modal.tsx
index 6dcaf87f0c..bb8b3e8739 100644
--- a/src/web-ui/src/component-library/components/Modal/Modal.tsx
+++ b/src/web-ui/src/component-library/components/Modal/Modal.tsx
@@ -89,6 +89,11 @@ function registerOpenModal(
   };
 }
 
+export type ModalDimensions = Pick<
+  React.CSSProperties,
+  'width' | 'minWidth' | 'maxWidth' | 'height' | 'minHeight' | 'maxHeight'
+>;
+
 export interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -96,6 +101,8 @@ export interface ModalProps {
   titleExtra?: React.ReactNode;
   children: React.ReactNode;
   size?: 'small' | 'medium' | 'large' | 'xlarge';
+  /** Instance constraints that take precedence over Appearance size presets. */
+  dimensions?: ModalDimensions;
   contentInset?: boolean;
   /** Extra class on `.modal__content` (e.g. flex layout for scroll regions inside children) */
   contentClassName?: string;
@@ -121,6 +128,7 @@ export const Modal: React.FC<ModalProps> = ({
   titleExtra,
   children,
   size = 'medium',
+  dimensions,
   contentInset = false,
   contentClassName,
   showCloseButton = true,
@@ -140,7 +148,10 @@ export const Modal: React.FC<ModalProps> = ({
   const [position, setPosition] = useState<{ x: number; y: number } | null>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
-  const [dimensions, setDimensions] = useState<{ width: number; height: number } | null>(null);
+  const [resizedDimensions, setResizedDimensions] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
   const [isResizing, setIsResizing] = useState(false);
   const [resizeDirection, setResizeDirection] = useState<string>('');
   const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 });
@@ -309,14 +320,14 @@ export const Modal: React.FC<ModalProps> = ({
       });
       
       if (resizable) {
-        setDimensions({
+        setResizedDimensions({
           width: modalWidth,
           height: modalHeight
         });
       }
     } else if (!isOpen && !isPresent) {
       setPosition(null);
-      setDimensions(null);
+      setResizedDimensions(null);
     }
   }, [isOpen, isPresent, draggable, resizable]);
 
@@ -386,7 +397,7 @@ export const Modal: React.FC<ModalProps> = ({
       newHeight = window.innerHeight - newY;
     }
     
-    setDimensions({ width: newWidth, height: newHeight });
+    setResizedDimensions({ width: newWidth, height: newHeight });
     setPosition({ x: newX, y: newY });
   }, [isResizing, resizable, resizeDirection, resizeStart, position]);
 
@@ -411,14 +422,19 @@ export const Modal: React.FC<ModalProps> = ({
 
   if (!isOpen && !isPresent) return null;
 
-  const appliedStyle = (draggable || resizable) && position ? {
-    position: 'fixed' as const,
-    top: position.y,
-    left: position.x,
-    transform: 'none',
-    margin: 0,
-    ...(dimensions && resizable ? { width: dimensions.width, height: dimensions.height } : {})
-  } : {};
+  const appliedStyle: React.CSSProperties = {
+    ...dimensions,
+    ...((draggable || resizable) && position ? {
+      position: 'fixed' as const,
+      top: position.y,
+      left: position.x,
+      transform: 'none',
+      margin: 0,
+      ...(resizedDimensions && resizable
+        ? { width: resizedDimensions.width, height: resizedDimensions.height }
+        : {}),
+    } : {}),
+  };
   const dialogAppearanceState = [
     draggable && 'draggable',
     isDragging && 'dragging',
diff --git a/src/web-ui/src/component-library/components/Modal/index.ts b/src/web-ui/src/component-library/components/Modal/index.ts
index d2bf6395c6..2dd7a7cf17 100644
--- a/src/web-ui/src/component-library/components/Modal/index.ts
+++ b/src/web-ui/src/component-library/components/Modal/index.ts
@@ -1,2 +1,2 @@
 export { Modal } from './Modal';
-export type { ModalProps } from './Modal';
\ No newline at end of file
+export type { ModalDimensions, ModalProps } from './Modal';