[Code]: fix top bar button size, width and right margin (#33061)

elastic · Mar 13, 2019 · 1e703f0 · 1e703f0
1 parent 2da9cd3
commit 1e703f0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/x-pack/plugins/code/public/components/main/content.tsx b/x-pack/plugins/code/public/components/main/content.tsx
@@ -44,6 +44,9 @@ const ButtonsContainer = styled.div`
   & > *:first-child {
     margin-right: ${theme.euiSizeS};
   }
+  & .euiButton {
+    min-width: ${theme.euiSizeS};
+  }
 `;
 
 const EditorBlameContainer = styled.div`
@@ -182,15 +185,15 @@ class CodeContent extends React.PureComponent<Props> {
       return (
         <ButtonsContainer>
           <EuiButtonGroup
-            buttonSize="m"
+            buttonSize="s"
             color="primary"
             options={this.buttonOptions}
             type="single"
             idSelected={buttonId}
             onChange={this.switchButton}
           />
           <EuiButtonGroup
-            buttonSize="m"
+            buttonSize="s"
             color="primary"
             options={this.rawButtonOptions}
             type="single"
@@ -203,7 +206,7 @@ class CodeContent extends React.PureComponent<Props> {
       return (
         <ButtonsContainer>
           <EuiButtonGroup
-            buttonSize="m"
+            buttonSize="s"
             color="primary"
             options={[
               {

diff --git a/x-pack/plugins/code/public/components/main/top_bar.tsx b/x-pack/plugins/code/public/components/main/top_bar.tsx
@@ -60,9 +60,7 @@ export class TopBar extends React.Component<Props, { value: string }> {
               <Breadcrumb routeParams={this.props.routeParams} />
             </EuiFlexGroup>
           </EuiFlexItem>
-          <EuiFlexItem grow={false} style={{ marginRight: '-.5rem' }}>
-            {this.props.buttons}
-          </EuiFlexItem>
+          <EuiFlexItem grow={false}>{this.props.buttons}</EuiFlexItem>
         </EuiFlexGroup>
       </div>
     );