From 56c0bb48915349c9cbc1ef6fcb8013b75a459cdc Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad.muhammad@elastic.co>
Date: Fri, 11 Feb 2022 10:11:40 +0100
Subject: [PATCH] design suggestions

---
 .../metric_config_panel/align_options.tsx                     | 1 +
 .../metric_visualization/metric_config_panel/size_options.tsx | 1 +
 .../metric_config_panel/text_formatting_options.tsx           | 4 ++--
 .../metric_config_panel/title_position_option.tsx             | 2 ++
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx
index 3074c1fb9cb37..d97aa08661005 100644
--- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx
@@ -51,6 +51,7 @@ export const AlignOptions: React.FC<TitlePositionProps> = ({ state, setState })
         setState({ ...state, textAlign: id as MetricState['textAlign'] });
       }}
       isIconOnly
+      buttonSize="compressed"
     />
   );
 };
diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/size_options.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/size_options.tsx
index 7047e9157c973..d33d72751a203 100644
--- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/size_options.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/size_options.tsx
@@ -92,6 +92,7 @@ export const SizeOptions: React.FC<TitlePositionProps> = ({ state, setState }) =
       }}
       itemLayoutAlign="top"
       hasDividers
+      fullWidth
     />
   );
 };
diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx
index 606b6aefe6a6d..9215d27ebb874 100644
--- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx
@@ -30,11 +30,11 @@ export const TextFormattingOptions: React.FC<TitlePositionProps> = ({ state, set
         </>
       }
     >
-      <EuiFlexGroup gutterSize="s">
+      <EuiFlexGroup gutterSize="s" responsive={false}>
         <EuiFlexItem>
           <SizeOptions state={state} setState={setState} />
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem grow={false}>
           <AlignOptions state={state} setState={setState} />
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx
index a0eef5e938f6b..6d8c41253dcf4 100644
--- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx
@@ -24,6 +24,7 @@ export const TitlePositionOptions: React.FC<TitlePositionProps> = ({ state, setS
   return (
     <EuiFormRow
       display="columnCompressed"
+      fullWidth
       label={
         <>
           {i18n.translate('xpack.lens.metricChart.titlePositionLabel', {
@@ -41,6 +42,7 @@ export const TitlePositionOptions: React.FC<TitlePositionProps> = ({ state, setS
         onChange={(value) => {
           setState({ ...state, titlePosition: value as MetricState['titlePosition'] });
         }}
+        buttonSize="compressed"
       />
     </EuiFormRow>
   );