[Maps] fix attribution overflow with exit full screen button (#62699)

* [Maps] fix attribution overflow with exit full screen button * use margin-left instead of padding-left Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Apr 8, 2020 · 3598b8c · 3598b8c
1 parent 8cacbdf
commit 3598b8c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/.../public/connected_components/widget_overlay/attribution_control/_attribution_control.scss b/.../public/connected_components/widget_overlay/attribution_control/_attribution_control.scss
@@ -4,3 +4,7 @@
   pointer-events: all;
   padding-left: $euiSizeM;
 }
+
+.mapAttributionControl__fullScreen {
+  margin-left: $euiSizeXXL * 4;
+}
diff --git a/...gacy/plugins/maps/public/connected_components/widget_overlay/attribution_control/index.js b/...gacy/plugins/maps/public/connected_components/widget_overlay/attribution_control/index.js
@@ -7,10 +7,12 @@
 import { connect } from 'react-redux';
 import { AttributionControl } from './view';
 import { getLayerList } from '../../../selectors/map_selectors';
+import { getIsFullScreen } from '../../../selectors/ui_selectors';
 
 function mapStateToProps(state = {}) {
   return {
     layerList: getLayerList(state),
+    isFullScreen: getIsFullScreen(state),
   };
 }
 

diff --git a/...egacy/plugins/maps/public/connected_components/widget_overlay/attribution_control/view.js b/...egacy/plugins/maps/public/connected_components/widget_overlay/attribution_control/view.js
@@ -7,6 +7,7 @@
 import React, { Fragment } from 'react';
 import _ from 'lodash';
 import { EuiText, EuiLink } from '@elastic/eui';
+import classNames from 'classnames';
 
 export class AttributionControl extends React.Component {
   state = {
@@ -86,7 +87,11 @@ export class AttributionControl extends React.Component {
       return null;
     }
     return (
-      <div className="mapAttributionControl">
+      <div
+        className={classNames('mapAttributionControl', {
+          mapAttributionControl__fullScreen: this.props.isFullScreen,
+        })}
+      >
         <EuiText size="xs">
           <small>
             <strong>{this._renderAttributions()}</strong>