update mobile view.

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">

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.

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) *

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

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">

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>

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) *

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

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>
 

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>

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>

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>

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'">

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>
 

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">
 

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">