ปรับขนาด modal config และ data grid

src/app/portal-manage/dashboard-management/dashboard-management.component.ts

@@ -431,8 +431,10 @@ export class DashboardManagementComponent implements OnInit, OnDestroy {
       const availableColumns = selectedDataset ? selectedDataset.columns : [];
 
       const dialogRef = this.dialog.open(WidgetConfigComponent, {
-        width: '600px',
-        data: { widget, availableColumns }
+        width: '1200px',
+        height: '80vh',
+        panelClass: 'custom-widget-config-dialog',
+        data: { widget, availableColumns, currentConfig: widget.config } // Pass current config for editing
       });
 
       dialogRef.afterClosed().subscribe(result => {

src/app/portal-manage/dashboard-management/widgets/configs/syncfusion-datagrid-config/syncfusion-datagrid-config.component.ts

@@ -82,22 +82,21 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
               </h3>
 
               <!-- Size Presets -->
-              <div class="size-presets">
+              <div class="size-presets mt-4">
                 <h4 class="text-sm font-medium text-gray-700 mb-3">Quick Presets</h4>
-                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
-                  <div
+                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
+                  <button
                     *ngFor="let option of sizeOptions; trackBy: trackBySizeOption"
-                    class="size-preset-card"
+                    type="button"
+                    class="size-preset-btn"
                     [class.selected]="currentConfig.sizeOption === option.id"
-                    (click)="setSizeOption(option.id)">
-                    <div class="preset-icon">
-                      <i [class]="getSizeIcon(option.id)"></i>
-                    </div>
+                    (click)="setSizeOption(option.id)"
+                    [attr.aria-pressed]="currentConfig.sizeOption === option.id">
                     <div class="preset-info">
-                      <h5>{{ option.label }}</h5>
-                      <p>{{ option.description }}</p>
-                    </div>
+                      <span class="preset-label">{{ option.label }}</span>
+                      <span class="preset-description">{{ option.description }}</span>
                     </div>
+                  </button>
                 </div>
               </div>
 
@@ -1004,35 +1003,55 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
       margin-bottom: 20px;
     }
 
-    .size-option {
-      padding: 16px;
-      border: 2px solid #e5e7eb;
+    .size-preset-btn {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 12px 8px;
+      border: 1px solid #e2e8f0;
       border-radius: 8px;
       cursor: pointer;
-      transition: all 0.2s;
-      background: white;
+      transition: all 0.25s ease-in-out;
+      background-color: #ffffff;
+      text-align: center;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     }
 
-    .size-option:hover {
+    .size-preset-btn:hover {
+      transform: translateY(-2px);
       border-color: #3b82f6;
-      background: #f0f9ff;
+      box-shadow: 0 4px 12px 0 rgba(59, 130, 246, 0.2);
+      background-color: #f7faff;
     }
 
-    .size-option.selected {
-      border-color: #3b82f6;
-      background: #dbeafe;
+    .size-preset-btn.selected {
+      border-color: #2563eb;
+      background-color: #eff6ff;
+      color: #2563eb;
+      box-shadow: 0 2px 6px 0 rgba(37, 99, 235, 0.25);
+      transform: translateY(-1px);
     }
 
-    .size-option h4 {
-      margin: 0 0 8px 0;
-      font-size: 1rem;
+
+
+    .size-preset-btn .preset-info {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .size-preset-btn .preset-label {
       font-weight: 600;
+      font-size: 0.875rem;
       color: #374151;
     }
 
-    .size-option p {
-      margin: 0;
-      font-size: 0.875rem;
+    .size-preset-btn.selected .preset-label {
+        color: #1e40af;
+    }
+
+    .size-preset-btn .preset-description {
+      font-size: 0.75rem;
       color: #6b7280;
     }
 
@@ -1271,18 +1290,6 @@ export class SyncfusionDatagridConfigComponent extends BaseConfigComponent imple
     this.configChange.emit(this.currentConfig);
   }
 
-  getSizeIcon(optionId: string): string {
-    const iconMap: { [key: string]: string } = {
-      'small': 'fas fa-expand-arrows-alt',
-      'medium': 'fas fa-th-large',
-      'large': 'fas fa-expand',
-      'full-width': 'fas fa-arrows-alt-h',
-      'full-height': 'fas fa-arrows-alt-v',
-      'full-panel': 'fas fa-expand-arrows-alt',
-      'custom': 'fas fa-cog'
-    };
-    return iconMap[optionId] || 'fas fa-th';
-  }
 
   setFullPanel(type: 'width' | 'height'): void {
     if (type === 'width') {

src/app/portal-manage/dashboard-management/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.ts

@@ -903,27 +903,35 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
     if (optionId === 'small') {
       this.width = 400;
       this.height = 300;
+      this.widthUnit = 'px';
+      this.heightUnit = 'px';
       this.fullWidth = false;
       this.fullHeight = false;
     } else if (optionId === 'medium') {
       this.width = 600;
       this.height = 400;
+      this.widthUnit = 'px';
+      this.heightUnit = 'px';
       this.fullWidth = false;
       this.fullHeight = false;
     } else if (optionId === 'large') {
       this.width = 800;
       this.height = 600;
+      this.widthUnit = 'px';
+      this.heightUnit = 'px';
       this.fullWidth = false;
       this.fullHeight = false;
     } else if (optionId === 'full-width') {
       this.width = 100;
-      this.height = 400;
+      this.height = 400; // Keep original height or make it configurable
       this.widthUnit = '%';
+      this.heightUnit = 'px';
       this.fullWidth = true;
       this.fullHeight = false;
     } else if (optionId === 'full-height') {
-      this.width = 600;
+      this.width = 600; // Keep original width or make it configurable
       this.height = 100;
+      this.widthUnit = 'px';
       this.heightUnit = '%';
       this.fullWidth = false;
       this.fullHeight = true;
@@ -935,6 +943,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
       this.fullWidth = true;
       this.fullHeight = true;
     }
+    // For 'custom', we don't change anything, just allow manual input.
   }
 
   getSizeIcon(optionId: string): string {