Add additional css margin controls to Feedback Modal

[craigbehnke]

Problem Statement

Add additional CSS variables to specify specific margin amounts for top/bottom/left/right on the feedback modal.

In order to fit the modal into a screen on platforms like Ionic Capacitor on mobile, it would be incredibly valuable to have additional css variables to add a margin around the div.dialog__position beyond the inset.

This is the current behavior without any CSS variables applied, purely out of the box:

This is what I want to be able to do using the individual margin variables:

This is what I can do with the current tooling, setting only --page-margin:

Solution Brainstorm

Add additional CSS variables for configuration:

• --page-margin-top
• --page-margin-bottom
• --page-margin-left
• --page-margin-right

These variable names are consistent with the existing --page-margin variable.

These variables could then be included in the .dialog__position class to specify the configured margin, while also defaulting to existing behavior:

.dialog__position {
    /* Existing properties in the class are here */
    margin-top: calc(var(--page-margin-top,--page-margin) - var(--page-margin));
    margin-bottom: calc(var(--page-margin-bottom,--page-margin) - var(--page-margin));
    margin-left: calc(var(--page-margin-left,--page-margin) - var(--page-margin));
    margin-right: calc(var(--page-margin-right,--page-margin) - var(--page-margin));
}

In a case where the developer does not set the specific variables, each statement would evaluate to --page-margin - --page-margin, which would always be 0px.

In a case where the developer has configured the specific margin variable, however, it would add the difference between the desired margin and the default page margin, effectively overriding it.

As a note, it appears that this functionally only applies in cases where the window is 600px wide or less (i.e. mobile) where the mode switches from padding to inset.

Edit: Current Workaround

After looking at the code a bit more, I did find a workaround that works but is incredibly hack-y: I can set the --page-margin variable with the arguments for the inset property, like this:

@media (max-width: 600px) {
    div#sentry-feedback{
        --page-margin: var(--ion-safe-area-top, 1rem)
            var(--ion-safe-area-right, 1rem) var(--ion-safe-area-bottom, 1rem)
            var(--ion-safe-area-left, 1rem);
    }
}

The reason why this is incredibly hack-y is that the docs specify the default value as 16px, which means that this is not CSS typesafe.

[s1gr1d]

Hy, your workaround seems fine as you can define all margins with the shorthand margin. If only one value is provided, this value is used on all sides. It's totally normal to provide four values.

Or maybe I understand something wrong?

[craigbehnke]

I think the main issue here, from my perspective, is that it is not in line with the modal's documentation. The docs indicate that the value is a single number, but I needed to supply 4 numbers.

While this works, my concern with using undocumented workarounds is that they are inherently fragile and could be inadvertently broken by a future update since this workaround is not written down anywhere (beyond this issue).

It isn't broken, but it could be accidentally.

(Also, my apologies for the delayed response.)

[chargome]

Hey @craigbehnke thanks, I just added a note on our docs for shorthand margin values.