From dceff8dd2f575671c670a2ff949928c1b78e6f41 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 23 Apr 2020 15:45:55 +0200
Subject: [PATCH] plugins/graphiql: add global style override to fix top bar
 layout issue

---
 .../src/components/GraphiQLPage/GraphiQLPage.tsx  | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
index 37fae51290..9bda2db944 100644
--- a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
+++ b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { FC, useState } from 'react';
-import { Tabs, Tab } from '@material-ui/core';
+import { Tabs, Tab, makeStyles } from '@material-ui/core';
 import { Page, pageTheme, Content, Header, HeaderLabel } from '@backstage/core';
 import 'graphiql/graphiql.css';
 import GraphiQL from 'graphiql';
@@ -45,7 +45,18 @@ const tabs = [
   },
 ];
 
+const useStyles = makeStyles({
+  root: {
+    '@global': {
+      '.graphiql-container': {
+        boxSizing: 'initial',
+      },
+    },
+  },
+});
+
 export const GraphiQLPage: FC<{}> = () => {
+  const classes = useStyles();
   const [tabIndex, setTabIndex] = useState(0);
 
   return (
@@ -54,7 +65,7 @@ export const GraphiQLPage: FC<{}> = () => {
         <HeaderLabel label="Owner" value="Spotify" />
         <HeaderLabel label="Lifecycle" value="Alpha" />
       </Header>
-      <Content noPadding>
+      <Content noPadding className={classes.root}>
         <Tabs value={tabIndex} onChange={(_, value) => setTabIndex(value)}>
           {tabs.map(({ title }, index) => (
             <Tab key={index} label={title} value={index} />