PrimeNG. Dialog. Особенности Breakpoints

В компоненте Dialog из библиотеки PrimeNG есть возможность задавать ширину диалогового окна в зависимости от ширины окна браузера. Не просто там в процентах (хотя и это тоже), а  пошагово. Ну, условно, обычно ширина диалога допустим 40rem, а если окно браузера в ширину 576 пикселей  или меньше, то ширина диалога 100%. 

Это делается помощью свойства breakpoints, в которое передается объект, свойства которого - это значение максимальной ширины окна брайзера, а значение этого свойства - это как раз ширина диалогово окна при такой ширине. Также через style.width можно задать ширину по умочанию - по факту ту, которая будет, если окно в браузере превысит максимально указанную ширину.

Как-то сложно выходит на словах. Давайте кодом. Например:

<p-dialog
  [breakpoints]="{
    '768px': '100vw',
  }"
  [style]="{ width: '40rem'}"
>  
  

В данном случае пока ширина окна браузера будет меньше или равна 768 пикселей, диалоговое окно будет на всю ширину окна, а если ширина окна больше 768, ширина диалога будет 40rem. Внутри это реализовнао с помощью создания медиа стилей @media. В данном случае будет добавлен стиль:

@media screen and (max-width: 768px) {
    .p-dialog:not(.p-dialog-maximized) {
        width: 30rem !important;
    }
}

Там еще будет завязка на уникальный id диалога, чтобы на другие диалоги это не распространялось, но это не важно.

Кроме того, таких "точек разрыва" может быть указано несколько. Но что важно, следовать они должны в порядке убывания ширины окна браузера, иначе работать будет только максимальная. 

То есть, если есть 2 правила на ширину 960 и 1200, то применяется правило 1200, потому что @media с условием max-width применяется на все ширины до указанной в условии, то есть и для 960 тоже. Но если условие с 960 добавить после условия с 1200, то 960 переопределит условие 1200, естественно только для ширины 960 и менее.

То есть, вот так правильно:

<p-dialog
  [breakpoints]="{
    '1200px': '40rem',
    '960px': '30rem',
  }"
  [style]="{ width: '50rem'}"
>

А вот так неправильно:

<p-dialog
  [breakpoints]="{
    '960px': '30rem',
    '1200px': '40rem',
  }"
  [style]="{ width: '50rem'}"
>

Для наглядности сделал пример

Bun ломает Angular Schematic в WebStorm|PhpStorm

Столкнулся я тут с каким-то Bun. Это типа замена NodeJs, почти полностью с ним совместимая, но быстрее. Посмотрел - вроде выглядит здорово. Начал "тыкать", все прекрасно работает и вдруг...