Our service uses ChangelogDialog, and due to a style conflict the dialog became full-width.
The problem is caused by .g-dialog overriding the width styles defined in .gc-changelog-dialog.
Current styles:
.g-dialog {
----side-padding: 32px;
----close-button-space: 0px;
width: var(--g-dialog-width, var(--_--width));
flex-direction: column;
display: flex;
position: relative;
}
In our case, neither --g-dialog-width nor --_--width is defined because ChangelogDialog does not provide a size option. As a result, the computed width falls back to auto, and the dialog stretches to fullscreen width.
ChangelogDialog itself defines a fixed width:
.gc-changelog-dialog {
--gc-changelog-dialog-width: 732px;
--gc-changelog-dialog-meta-width: 80px;
width: var(--gc-changelog-dialog-width);
}
However, this style gets overridden/cancelled after the library build, so the component loses its intended width.
I siggest remove fixed width and use size prop in dialog
Our service uses ChangelogDialog, and due to a style conflict the dialog became full-width.
The problem is caused by .g-dialog overriding the width styles defined in .gc-changelog-dialog.
Current styles:
.g-dialog {
----side-padding: 32px;
----close-button-space: 0px;
width: var(--g-dialog-width, var(--_--width));
flex-direction: column;
display: flex;
position: relative;
}
In our case, neither --g-dialog-width nor --_--width is defined because ChangelogDialog does not provide a size option. As a result, the computed width falls back to auto, and the dialog stretches to fullscreen width.
ChangelogDialog itself defines a fixed width:
.gc-changelog-dialog {
--gc-changelog-dialog-width: 732px;
--gc-changelog-dialog-meta-width: 80px;
width: var(--gc-changelog-dialog-width);
}
However, this style gets overridden/cancelled after the library build, so the component loses its intended width.
I siggest remove fixed width and use size prop in dialog