From f70af2ad21170d16db238276ff356edc92812564 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
 <92744169+mehmetcetin01140@users.noreply.github.com>
Date: Wed, 11 Dec 2024 13:54:29 +0300
Subject: [PATCH] Fixed #16968 | Component: DynamicDialog - breakpoints are
 ignored

---
 packages/primeng/src/dynamicdialog/dynamicdialog.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/primeng/src/dynamicdialog/dynamicdialog.ts b/packages/primeng/src/dynamicdialog/dynamicdialog.ts
index 2d56e005266..b6db915e53c 100755
--- a/packages/primeng/src/dynamicdialog/dynamicdialog.ts
+++ b/packages/primeng/src/dynamicdialog/dynamicdialog.ts
@@ -63,6 +63,7 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
                 [style.height]="ddconfig.height"
                 [attr.aria-labelledby]="ariaLabelledBy"
                 [attr.aria-modal]="true"
+                [attr.id]="dialogId"
             >
                 <div *ngIf="ddconfig.resizable" [ngClass]="'p-resizable-handle'" style="z-index: 90;" (mousedown)="initResize($event)"></div>
                 <div #titlebar [ngClass]="'p-dialog-header'" (mousedown)="initDrag($event)" *ngIf="ddconfig.showHeader !== false">
@@ -281,6 +282,10 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn
         };
     }
 
+    get dialogId() {
+        return this.attrSelector;
+    }
+
     constructor(
         public renderer: Renderer2,
         public ddconfig: DynamicDialogConfig,
@@ -297,6 +302,7 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn
             this.createStyle();
         }
     }
+
     createStyle() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.styleElement) {
@@ -307,7 +313,7 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn
                 for (let breakpoint in this.breakpoints) {
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
-                            .p-dialog[${this.attrSelector}]:not(.p-dialog-maximized) {
+                            .p-dialog[id=${this.dialogId}]:not(.p-dialog-maximized) {
                                 width: ${this.breakpoints[breakpoint]} !important;
                             }
                         }