[Code] fix reference panel layout problems

x-pack/plugins/code/public/components/codeblock/codeblock.tsx

@@ -52,6 +52,7 @@ export class CodeBlock extends React.PureComponent<Props> {
         selectionHighlight: false,
         renderLineHighlight: 'none',
         renderIndentGuides: false,
+        automaticLayout: false,
       });
       this.ed.onMouseDown((e: editor.IEditorMouseEvent) => {
         if (

x-pack/plugins/code/public/components/diff_page/diff.scss

@@ -1,9 +1,11 @@
-button.euiAccordion__button > div:first-child {
+
+
+.diff > button.euiAccordion__button > div:first-child {
   flex-direction: row-reverse;
   padding: $euiSize $euiSizeS;
 }
 
-button.euiAccordion__button {
+.diff > button.euiAccordion__button {
   &:hover {
     text-decoration: none;
   }

x-pack/plugins/code/public/components/diff_page/diff.tsx

@@ -191,7 +191,7 @@ export class DiffPage extends React.Component<Props> {
       <Difference repoUri={repoUri} revision={commit.commit.id} fileDiff={file} key={file.path} />
     ));
     return (
-      <div>
+      <div className="diff">
         <SearchBar
           repoScope={this.props.repoScope}
           query={this.props.query}

x-pack/plugins/code/public/components/editor/references_panel.scss

@@ -7,6 +7,13 @@
   0px -6px 12px rgba(0, 0, 0, 0.05), 0px -12px 24px rgba(0, 0, 0, 0.05);
 }
 
+.code-editor-references-panel.expanded {
+  position: relative;
+  flex-grow: 10;
+  max-height: 100%;
+  height: 100%;
+}
+
 .code-editor-reference-accordion-button {
   font-size: 13px;
 }

x-pack/plugins/code/public/components/editor/references_panel.tsx

@@ -13,6 +13,7 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
+import classname from 'classnames';
 import { IPosition } from 'monaco-editor';
 import queryString from 'querystring';
 import React from 'react';
@@ -57,20 +58,12 @@ export class ReferencesPanel extends React.Component<Props, State> {
     const body = this.props.isLoading ? <EuiLoadingKibana size="xl" /> : this.renderGroupByRepo();
     const styles: any = {};
     const expanded = this.state.expanded;
-    if (expanded) {
-      styles.position = 'absolute';
-      styles.bottom = 0;
-      styles.right = 0;
-      if (this.node) {
-        const parent = this.node.parentNode as Element;
-        styles.width = parent.clientWidth;
-        styles.height = parent.clientHeight - 75;
-        styles.maxHeight = styles.height;
-        styles.zIndex = 1000;
-      }
-    }
     return (
-      <EuiPanel grow={false} className="code-editor-references-panel" style={styles}>
+      <EuiPanel
+        grow={false}
+        className={classname(['code-editor-references-panel', expanded ? 'expanded' : ''])}
+        style={styles}
+      >
         <EuiButtonIcon
           size="s"
           onClick={this.toggleExpand}
@@ -90,7 +83,7 @@ export class ReferencesPanel extends React.Component<Props, State> {
         <EuiTitle size="s">
           <h3>{this.props.title}</h3>
         </EuiTitle>
-
+        <EuiSpacer size="m" />
         <div className="code-auto-overflow-y">{body}</div>
       </EuiPanel>
     );
@@ -103,12 +96,19 @@ export class ReferencesPanel extends React.Component<Props, State> {
   }
 
   private renderReferenceRepo({ repo, files }: GroupedRepoReferences) {
+    const [_, org, name] = repo.split('/');
+    const buttonContent = (
+      <span>
+        <span>{org}</span>/<b>{name}</b>
+      </span>
+    );
+
     return (
       <EuiAccordion
         id={repo}
         key={repo}
         buttonContentClassName="code-editor-reference-accordion-button"
-        buttonContent={repo}
+        buttonContent={buttonContent}
         paddingSize="s"
         initialIsOpen={true}
       >

x-pack/plugins/code/public/components/main/content.tsx

@@ -54,6 +54,7 @@ const EditorBlameContainer = styled.div`
   display: flex;
   flex-direction: row;
   flex-grow: 1;
+  max-height: calc(100% - 97px);
 `;
 
 const DirectoryViewContainer = styled.div`
@@ -69,7 +70,8 @@ const Root = styled.div`
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  height: 100%;
+  width: calc(100% - 256px);
 `;
 
 interface Props extends RouteComponentProps<MainRouteParams> {

x-pack/plugins/code/public/components/main/main.scss

@@ -1,6 +1,6 @@
 .code-editor-container {
-  height: 100%;
-  overflow: auto;
+  overflow: hidden;
+  flex-grow: 1;
 }
 
 .code-auto-overflow {

x-pack/plugins/code/public/components/main/main.tsx

@@ -28,6 +28,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: row;
   flex-grow: 1;
+  height: 100%;
 `;
 
 interface Props extends RouteComponentProps<MainRouteParams> {

x-pack/plugins/code/public/monaco/monaco_helper.ts

@@ -62,6 +62,7 @@ export class MonacoHelper {
           folding: true,
           scrollBeyondLastLine: false,
           renderIndentGuides: false,
+          automaticLayout: false,
         },
         {
           textModelService: new TextModelResolverService(monaco),