From 2e226e60f529b17fb8507cf7af1bf6de647b41c6 Mon Sep 17 00:00:00 2001
From: Chris Chen <yuanson.ch@gmail.com>
Date: Tue, 23 Jun 2026 14:18:55 -0700
Subject: [PATCH] update mobile view.

---
 .../issue-check-dialog/issue-check-dialog.component.html    | 2 +-
 .../check-register-page/check-register-page.component.html  | 4 ++--
 .../expense-categories-page.component.html                  | 4 ++--
 .../pages/expenses-page/expenses-page.component.html        | 4 ++--
 .../monthly-statement-page.component.html                   | 2 +-
 .../member-quick-add-dialog.component.html                  | 2 +-
 .../giving-categories-page.component.html                   | 2 +-
 .../giving/pages/givings-page/givings-page.component.html   | 2 +-
 .../offering-entry-mobile-page.component.html               | 6 +++---
 .../offering-session-page.component.html                    | 2 +-
 .../pages/audit-logs-page/audit-logs-page.component.html    | 2 +-
 .../pages/system-logs-page/system-logs-page.component.html  | 2 +-
 .../create-user-dialog/create-user-dialog.component.html    | 2 +-
 .../member-form-dialog/member-form-dialog.component.html    | 2 +-
 .../create-user-dialog/create-user-dialog.component.html    | 2 +-
 .../edit-user-dialog/edit-user-dialog.component.html        | 2 +-
 16 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/APP/src/app/features/disbursement/components/issue-check-dialog/issue-check-dialog.component.html b/APP/src/app/features/disbursement/components/issue-check-dialog/issue-check-dialog.component.html
index 525d924..28adbff 100644
--- a/APP/src/app/features/disbursement/components/issue-check-dialog/issue-check-dialog.component.html
+++ b/APP/src/app/features/disbursement/components/issue-check-dialog/issue-check-dialog.component.html
@@ -1,4 +1,4 @@
-<kendo-dialog title="Issue Checks / 開立支票" [width]="720" (close)="onClose()">
+<kendo-dialog title="Issue Checks / 開立支票" [width]="720" [maxWidth]="'95vw'" [maxHeight]="'90vh'" (close)="onClose()">
   <div class="p-2 flex flex-col gap-4" style="max-height: 70vh; overflow-y: auto;">
 
     <label class="flex flex-col gap-1 w-60">
diff --git a/APP/src/app/features/disbursement/pages/check-register-page/check-register-page.component.html b/APP/src/app/features/disbursement/pages/check-register-page/check-register-page.component.html
index 2a15c16..b865d20 100644
--- a/APP/src/app/features/disbursement/pages/check-register-page/check-register-page.component.html
+++ b/APP/src/app/features/disbursement/pages/check-register-page/check-register-page.component.html
@@ -114,7 +114,7 @@
   </div>
 
   <!-- Detail dialog -->
-  <kendo-dialog *ngIf="detail" title="Check #{{ detail.checkNumber }}" [width]="560" (close)="detail = null">
+  <kendo-dialog *ngIf="detail" title="Check #{{ detail.checkNumber }}" [width]="560" [maxWidth]="'95vw'" [maxHeight]="'90vh'" (close)="detail = null">
     <div class="p-2 flex flex-col gap-2">
       <div class="grid grid-cols-2 gap-2 text-sm">
         <div><strong>Payee:</strong> {{ detail.payeeName }}</div>
@@ -150,7 +150,7 @@
   </kendo-dialog>
 
   <!-- Void dialog -->
-  <kendo-dialog *ngIf="voidRow" title="Void Check #{{ voidRow.checkNumber }}" [width]="420" (close)="voidRow = null">
+  <kendo-dialog *ngIf="voidRow" title="Void Check #{{ voidRow.checkNumber }}" [width]="420" [maxWidth]="'95vw'" (close)="voidRow = null">
     <div class="p-2 flex flex-col gap-2">
       <p class="text-sm" style="color:#991b1b;">
         Voiding returns the bundled expenses to Approved so they can be re-issued.
diff --git a/APP/src/app/features/expense/pages/expense-categories-page/expense-categories-page.component.html b/APP/src/app/features/expense/pages/expense-categories-page/expense-categories-page.component.html
index 83127b6..7c7ff7b 100644
--- a/APP/src/app/features/expense/pages/expense-categories-page/expense-categories-page.component.html
+++ b/APP/src/app/features/expense/pages/expense-categories-page/expense-categories-page.component.html
@@ -47,7 +47,7 @@
   <kendo-dialog *ngIf="groupDialogOpen"
     [title]="editingGroupId != null ? 'Edit Group' : 'New Group'"
     (close)="groupDialogOpen = false"
-    [width]="480">
+    [width]="480" [maxWidth]="'95vw'">
     <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
       <label class="flex flex-col gap-1">
         Name (EN) *
@@ -75,7 +75,7 @@
   <kendo-dialog *ngIf="subDialogOpen"
     [title]="editingSubId != null ? 'Edit Subcategory' : 'New Subcategory'"
     (close)="subDialogOpen = false"
-    [width]="480">
+    [width]="480" [maxWidth]="'95vw'">
     <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
       <label class="flex flex-col gap-1">
         Name (EN) *
diff --git a/APP/src/app/features/expense/pages/expenses-page/expenses-page.component.html b/APP/src/app/features/expense/pages/expenses-page/expenses-page.component.html
index b7a73c3..13d72bc 100644
--- a/APP/src/app/features/expense/pages/expenses-page/expenses-page.component.html
+++ b/APP/src/app/features/expense/pages/expenses-page/expenses-page.component.html
@@ -101,7 +101,7 @@
   </app-expense-form-dialog>
 
   <!-- Mark Paid dialog -->
-  <kendo-dialog *ngIf="payRow" title="Mark Paid" [width]="400" (close)="payRow = null">
+  <kendo-dialog *ngIf="payRow" title="Mark Paid" [width]="400" [maxWidth]="'95vw'" (close)="payRow = null">
     <div class="grid grid-cols-1 gap-3 p-2">
       <label class="flex flex-col gap-1">
         Check #
@@ -119,7 +119,7 @@
   </kendo-dialog>
 
   <!-- Reject dialog -->
-  <kendo-dialog *ngIf="rejectRow" title="Reject Expense" [width]="400" (close)="rejectRow = null">
+  <kendo-dialog *ngIf="rejectRow" title="Reject Expense" [width]="400" [maxWidth]="'95vw'" (close)="rejectRow = null">
     <div class="grid grid-cols-1 gap-3 p-2">
       <label class="flex flex-col gap-1">
         Review Notes
diff --git a/APP/src/app/features/expense/pages/monthly-statement-page/monthly-statement-page.component.html b/APP/src/app/features/expense/pages/monthly-statement-page/monthly-statement-page.component.html
index 62a7d68..49dcf10 100644
--- a/APP/src/app/features/expense/pages/monthly-statement-page/monthly-statement-page.component.html
+++ b/APP/src/app/features/expense/pages/monthly-statement-page/monthly-statement-page.component.html
@@ -55,7 +55,7 @@
   </kendo-grid>
 
   <!-- Create / Edit dialog -->
-  <kendo-dialog *ngIf="dialogOpen" title="Monthly Statement" [width]="560" (close)="dialogOpen = false">
+  <kendo-dialog *ngIf="dialogOpen" title="Monthly Statement" [width]="560" [maxWidth]="'95vw'" [maxHeight]="'90vh'" (close)="dialogOpen = false">
     <div class="grid grid-cols-1 md:grid-cols-2 gap-3 p-2">
 
       <label class="flex flex-col gap-1">
diff --git a/APP/src/app/features/giving/components/member-quick-add-dialog/member-quick-add-dialog.component.html b/APP/src/app/features/giving/components/member-quick-add-dialog/member-quick-add-dialog.component.html
index e5b4aa3..d98e556 100644
--- a/APP/src/app/features/giving/components/member-quick-add-dialog/member-quick-add-dialog.component.html
+++ b/APP/src/app/features/giving/components/member-quick-add-dialog/member-quick-add-dialog.component.html
@@ -1,4 +1,4 @@
-<kendo-dialog title="Quick add member" (close)="cancelled.emit()" [width]="420">
+<kendo-dialog title="Quick add member" (close)="cancelled.emit()" [width]="420" [maxWidth]="'95vw'">
   <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
     <label class="flex flex-col gap-1">First name (EN) *<kendo-textbox [(ngModel)]="firstName_en"></kendo-textbox></label>
     <label class="flex flex-col gap-1">Last name (EN) *<kendo-textbox [(ngModel)]="lastName_en"></kendo-textbox></label>
diff --git a/APP/src/app/features/giving/pages/giving-categories-page/giving-categories-page.component.html b/APP/src/app/features/giving/pages/giving-categories-page/giving-categories-page.component.html
index 4552f73..c846ff6 100644
--- a/APP/src/app/features/giving/pages/giving-categories-page/giving-categories-page.component.html
+++ b/APP/src/app/features/giving/pages/giving-categories-page/giving-categories-page.component.html
@@ -21,7 +21,7 @@
     </kendo-grid-column>
   </kendo-grid>
 
-  <kendo-dialog *ngIf="showDialog" [title]="editing ? 'Edit Giving Type' : 'Add Giving Type'" (close)="showDialog=false" [width]="480">
+  <kendo-dialog *ngIf="showDialog" [title]="editing ? 'Edit Giving Type' : 'Add Giving Type'" (close)="showDialog=false" [width]="480" [maxWidth]="'95vw'">
     <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
       <label class="flex flex-col gap-1">
         Name (EN) *
diff --git a/APP/src/app/features/giving/pages/givings-page/givings-page.component.html b/APP/src/app/features/giving/pages/givings-page/givings-page.component.html
index 7684f49..1412b5e 100644
--- a/APP/src/app/features/giving/pages/givings-page/givings-page.component.html
+++ b/APP/src/app/features/giving/pages/givings-page/givings-page.component.html
@@ -28,7 +28,7 @@
     </kendo-grid-column>
   </kendo-grid>
 
-  <kendo-dialog *ngIf="showDialog" title="Add Giving" (close)="showDialog=false" [width]="520">
+  <kendo-dialog *ngIf="showDialog" title="Add Giving" (close)="showDialog=false" [width]="520" [maxWidth]="'95vw'" [maxHeight]="'90vh'">
     <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
       <label class="flex items-center gap-2 md:col-span-2">
         <input type="checkbox" [ngModel]="form.isAnonymous" (ngModelChange)="toggleAnonymous()" /> Anonymous
diff --git a/APP/src/app/features/giving/pages/offering-entry-mobile-page/offering-entry-mobile-page.component.html b/APP/src/app/features/giving/pages/offering-entry-mobile-page/offering-entry-mobile-page.component.html
index 201aa1e..f7b9f5d 100644
--- a/APP/src/app/features/giving/pages/offering-entry-mobile-page/offering-entry-mobile-page.component.html
+++ b/APP/src/app/features/giving/pages/offering-entry-mobile-page/offering-entry-mobile-page.component.html
@@ -108,7 +108,7 @@
 
   <!-- Quick-add member -->
   <kendo-dialog *ngIf="showQuickAdd" title="快速新增會友 · Quick add member"
-    (close)="cancelQuickAdd()" [minWidth]="280" [width]="360">
+    (close)="cancelQuickAdd()" [minWidth]="280" [width]="'95vw'" [maxWidth]="360">
     <div class="oe__qa">
       <div class="oe__field">
         <label class="oe__label">英文名 · Legal first name *</label>
@@ -145,7 +145,7 @@
 
   <!-- Today's totals: payment-method breakdown + per-check detail -->
   <kendo-dialog *ngIf="showTotals" title="今日總計 · Today's Totals"
-    (close)="closeTotals()" [minWidth]="280" [width]="360">
+    (close)="closeTotals()" [minWidth]="280" [width]="'95vw'" [maxWidth]="360">
     <div class="oe__qa">
       <p *ngIf="totalsLoading" class="oe__totals-loading">載入中… · Loading</p>
 
@@ -192,7 +192,7 @@
 
   <!-- Add paper proof: capture photos / pick files → compress + merge to one PDF -->
   <kendo-dialog *ngIf="showPaperProof" title="新增 Paper Proof · 紙本證明"
-    (close)="cancelPaperProof()" [minWidth]="280" [width]="360">
+    (close)="cancelPaperProof()" [minWidth]="280" [width]="'95vw'" [maxWidth]="360">
     <div class="oe__qa">
       <p class="oe__proof-hint">附上點算單／信封的照片或 PDF · Photo or PDF of the count sheet / envelopes</p>
 
diff --git a/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.html b/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.html
index d44afd1..6c4d7bd 100644
--- a/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.html
+++ b/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.html
@@ -293,7 +293,7 @@
   </ng-container>
 
   <!-- Reopen confirm dialog -->
-  <kendo-dialog *ngIf="confirmReopenOpen" title="Reopen session? / 重新開啟" (close)="confirmReopenOpen = false" [width]="440">
+  <kendo-dialog *ngIf="confirmReopenOpen" title="Reopen session? / 重新開啟" (close)="confirmReopenOpen = false" [width]="440" [maxWidth]="'95vw'">
     <p class="dialog-text">
       Editing a submitted session will reopen it and set its status back to <strong>Draft</strong> until you submit again.
       <br><span>編輯已送出的 session 會重新開啟並將狀態改回草稿，直到再次送出。</span>
diff --git a/APP/src/app/features/logging/pages/audit-logs-page/audit-logs-page.component.html b/APP/src/app/features/logging/pages/audit-logs-page/audit-logs-page.component.html
index 9a107c6..c705162 100644
--- a/APP/src/app/features/logging/pages/audit-logs-page/audit-logs-page.component.html
+++ b/APP/src/app/features/logging/pages/audit-logs-page/audit-logs-page.component.html
@@ -58,7 +58,7 @@
   </kendo-grid>
 
   <!-- Detail dialog -->
-  <kendo-dialog *ngIf="detail" title="Audit Log #{{ detail.id }}" [width]="720" (close)="detail = null">
+  <kendo-dialog *ngIf="detail" title="Audit Log #{{ detail.id }}" [width]="720" [maxWidth]="'95vw'" [maxHeight]="'90vh'" (close)="detail = null">
     <div class="p-2 flex flex-col gap-2 text-sm">
       <div class="grid grid-cols-2 gap-2">
         <div><strong>Time:</strong> {{ detail.timestamp | date:'medium' }}</div>
diff --git a/APP/src/app/features/logging/pages/system-logs-page/system-logs-page.component.html b/APP/src/app/features/logging/pages/system-logs-page/system-logs-page.component.html
index 60c0dfd..1b50b20 100644
--- a/APP/src/app/features/logging/pages/system-logs-page/system-logs-page.component.html
+++ b/APP/src/app/features/logging/pages/system-logs-page/system-logs-page.component.html
@@ -49,7 +49,7 @@
   </kendo-grid>
 
   <!-- Detail dialog -->
-  <kendo-dialog *ngIf="detail" title="System Log #{{ detail.id }}" [width]="720" (close)="detail = null">
+  <kendo-dialog *ngIf="detail" title="System Log #{{ detail.id }}" [width]="720" [maxWidth]="'95vw'" [maxHeight]="'90vh'" (close)="detail = null">
     <div class="p-2 flex flex-col gap-2 text-sm">
       <div class="grid grid-cols-2 gap-2">
         <div><strong>Time:</strong> {{ detail.timestamp | date:'medium' }}</div>
diff --git a/APP/src/app/features/members/components/create-user-dialog/create-user-dialog.component.html b/APP/src/app/features/members/components/create-user-dialog/create-user-dialog.component.html
index e7f29ac..7a01c6c 100644
--- a/APP/src/app/features/members/components/create-user-dialog/create-user-dialog.component.html
+++ b/APP/src/app/features/members/components/create-user-dialog/create-user-dialog.component.html
@@ -1,4 +1,4 @@
-<kendo-dialog title="Create User Account" (close)="onCancel()" [minWidth]="480" [width]="520">
+<kendo-dialog title="Create User Account" (close)="onCancel()" [width]="520" [maxWidth]="'95vw'" [maxHeight]="'90vh'">
 
   <!-- STEP 1: Form -->
   <ng-container *ngIf="step === 'form'">
diff --git a/APP/src/app/features/members/components/member-form-dialog/member-form-dialog.component.html b/APP/src/app/features/members/components/member-form-dialog/member-form-dialog.component.html
index fc8b14c..7a31d76 100644
--- a/APP/src/app/features/members/components/member-form-dialog/member-form-dialog.component.html
+++ b/APP/src/app/features/members/components/member-form-dialog/member-form-dialog.component.html
@@ -1,4 +1,4 @@
-<kendo-dialog [title]="title" (close)="onCancel()" [minWidth]="600" [width]="750">
+<kendo-dialog [title]="title" (close)="onCancel()" [width]="750" [maxWidth]="'95vw'" [maxHeight]="'90vh'">
   <form [formGroup]="form" (ngSubmit)="onSubmit()">
     <kendo-tabstrip>
 
diff --git a/APP/src/app/features/users/components/create-user-dialog/create-user-dialog.component.html b/APP/src/app/features/users/components/create-user-dialog/create-user-dialog.component.html
index a89bfdd..dc41d94 100644
--- a/APP/src/app/features/users/components/create-user-dialog/create-user-dialog.component.html
+++ b/APP/src/app/features/users/components/create-user-dialog/create-user-dialog.component.html
@@ -1,4 +1,4 @@
-<kendo-dialog title="Add New User" (close)="onCancel()" [minWidth]="460" [width]="500">
+<kendo-dialog title="Add New User" (close)="onCancel()" [width]="500" [maxWidth]="'95vw'" [maxHeight]="'90vh'">
   <form [formGroup]="form" class="k-form k-form-vertical k-p-2">
     <div class="grid grid-cols-1 gap-y-3">
 
diff --git a/APP/src/app/features/users/components/edit-user-dialog/edit-user-dialog.component.html b/APP/src/app/features/users/components/edit-user-dialog/edit-user-dialog.component.html
index f7942fe..3797cb7 100644
--- a/APP/src/app/features/users/components/edit-user-dialog/edit-user-dialog.component.html
+++ b/APP/src/app/features/users/components/edit-user-dialog/edit-user-dialog.component.html
@@ -1,4 +1,4 @@
-<kendo-dialog title="Edit User" (close)="onCancel()" [minWidth]="460" [width]="500">
+<kendo-dialog title="Edit User" (close)="onCancel()" [width]="500" [maxWidth]="'95vw'" [maxHeight]="'90vh'">
   <form [formGroup]="form" class="k-form k-form-vertical k-p-2">
     <div class="grid grid-cols-1 gap-y-3">