EuiSuperDatePicker leaves unnecessary margin on right side when used in FlexGroup

[shahzad31]

In UpTime we are using EuiSuperDatePicker in header bar, when used like this

                    <EuiFlexGroup
                      alignItems="center"
                      justifyContent="spaceBetween"
                      gutterSize="s"
                    >
                      <EuiFlexItem grow={false}>
                        <EuiTitle>
                          <h1>{headingText}</h1>
                        </EuiTitle>
                      </EuiFlexItem>
                      <EuiFlexItem grow={false}>
                        <UptimeDatePicker refreshApp={refreshApp} {...rootRouteProps} />
                      </EuiFlexItem>
                    </EuiFlexGroup>

EuiSuperDatePicker itself is a flex group with guttersize "s" so it leaves margin at end as shown below

I think this can be resolved by providing option to override the guttersize in component or by customizing it's css.

This issue was discovered in UpTime app #40585

[cchaos]

@shahzad31 The gutterSize is necessary to put a space between the date picker and the refresh button. Looking at your code I see you're only indicating down to the wrapper you have around the date picker <UptimeDatePicker>. Can you also detail what that component returns?

[shahzad31]

@cchaos here is the wrapper

  return (
    <EuiSuperDatePicker
      start={dateRangeStart}
      end={dateRangeEnd}
      commonlyUsedRanges={CLIENT_DEFAULTS.COMMONLY_USED_DATE_RANGES}
      isPaused={autorefreshIsPaused}
      refreshInterval={autorefreshInterval}
       ....
   />
  );

[cchaos]

So it's actually more of a combination of the negative margins produced by the EuiFlexGroup and the max-width: 100% applied to the .euiSuperDatePicker__flexWrapper

This will take some time to figure out. I tried to find a workaround for now, but there wasn't anything obvious that wouldn't then get quite messed up once this actually fixed.

[shahzad31]

@cchaos since it has fixed gutter small, why not use max-width: calc(100% + 8px); ? i think that will solve the problem.

[cchaos]

That's what I'm thinking too, but we'd have to check all the current usages to ensure the solution works no matter where it's placed.

[shahzad31]

Going to reopen this for mobile responsiveness, we missed that use case. See the margin on the right side of refresh button, going to fix that

[shahzad31]

Closing this, since new issue should be open for missed use case.