Skip to content

fix(ChangelogDialog): fix style conflict in ChangelogDialog #385

@PosikBoy

Description

@PosikBoy

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions