[ML] update chart_switch styles

elastic · Jun 4, 2021 · d699e9e · d699e9e
1 parent 3cb6b14
commit d699e9e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 18 deletions.
diff --git a/...k/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss b/...k/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss
@@ -5,13 +5,6 @@
   }
 }
 
-.lnsChartSwitch__options {
-  .euiSelectableListItem__append {
-    display: flex;
-    align-items: center;
-  }
-}
-
 .lnsChartSwitch__summaryIcon {
   margin-right: $euiSizeS;
   transform: translateY(-1px);

diff --git a/...ck/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/...ck/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
@@ -297,17 +297,11 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
                       <EuiIcon className="lnsChartSwitch__chartIcon" type={v.icon || 'empty'} />
                     ),
                     append: (
-                      <EuiFlexGroup gutterSize="xs" responsive={false}>
-                        {v.showBetaBadge ? (
-                          <EuiFlexItem grow={false}>
-                            <EuiBadge color="hollow">
-                              <FormattedMessage
-                                id="xpack.lens.chartSwitch.betaLabel"
-                                defaultMessage="Beta"
-                              />
-                            </EuiBadge>
-                          </EuiFlexItem>
-                        ) : null}
+                      <EuiFlexGroup
+                        gutterSize="xs"
+                        responsive={false}
+                        style={{ display: 'inline-flex' }}
+                      >
                         {v.selection.dataLoss !== 'nothing' ? (
                           <EuiFlexItem grow={false}>
                             <EuiIconTip
@@ -330,6 +324,16 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
                             />
                           </EuiFlexItem>
                         ) : null}
+                        {v.showBetaBadge ? (
+                          <EuiFlexItem grow={false}>
+                            <EuiBadge color="hollow">
+                              <FormattedMessage
+                                id="xpack.lens.chartSwitch.betaLabel"
+                                defaultMessage="Beta"
+                              />
+                            </EuiBadge>
+                          </EuiFlexItem>
+                        ) : null}
                       </EuiFlexGroup>
                     ),
                     // Apparently checked: null is not valid for TS