From 02c60b5f8b9b49511a543dfa80c4003068e1f093 Mon Sep 17 00:00:00 2001
From: Abhishek Jakhar <abhishekjakhar.11@gmail.com>
Date: Fri, 16 Oct 2020 09:21:52 +0530
Subject: [PATCH] fix(tech-radar): add overflowX scroll to the company radar
 section

---
 .changeset/slow-experts-peel.md               |  5 ++
 .../tech-radar/src/components/RadarPage.tsx   | 53 +++++++++++--------
 2 files changed, 36 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/slow-experts-peel.md

diff --git a/.changeset/slow-experts-peel.md b/.changeset/slow-experts-peel.md
new file mode 100644
index 0000000000..ed9c7af21e
--- /dev/null
+++ b/.changeset/slow-experts-peel.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-tech-radar': patch
+---
+
+fix the horizontal scrolling issue in the RadarPage component
diff --git a/plugins/tech-radar/src/components/RadarPage.tsx b/plugins/tech-radar/src/components/RadarPage.tsx
index 84cfef3213..779d1fa088 100644
--- a/plugins/tech-radar/src/components/RadarPage.tsx
+++ b/plugins/tech-radar/src/components/RadarPage.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Grid } from '@material-ui/core';
+import { Grid, makeStyles } from '@material-ui/core';
 import {
   Content,
   ContentHeader,
@@ -27,6 +27,12 @@ import {
 import RadarComponent from '../components/RadarComponent';
 import { TechRadarComponentProps } from '../api';
 
+const useStyles = makeStyles(() => ({
+  overflowXScroll: {
+    overflowX: 'scroll',
+  },
+}));
+
 export type TechRadarPageProps = TechRadarComponentProps & {
   title?: string;
   subtitle?: string;
@@ -38,28 +44,31 @@ export const RadarPage = ({
   subtitle,
   pageTitle,
   ...props
-}: TechRadarPageProps): JSX.Element => (
-  <Page themeId="tool">
-    <Header title={title} subtitle={subtitle}>
-      <HeaderLabel label="Owner" value="Spotify" />
-      <HeaderLabel label="Lifecycle" value="Beta" />
-    </Header>
-    <Content>
-      <ContentHeader title={pageTitle}>
-        <SupportButton>
-          This is used for visualizing the official guidelines of different
-          areas of software development such as languages, frameworks,
-          infrastructure and processes.
-        </SupportButton>
-      </ContentHeader>
-      <Grid container spacing={3} direction="row">
-        <Grid item xs={12} sm={6} md={4}>
-          <RadarComponent {...props} />
+}: TechRadarPageProps): JSX.Element => {
+  const classes = useStyles();
+  return (
+    <Page themeId="tool">
+      <Header title={title} subtitle={subtitle}>
+        <HeaderLabel label="Owner" value="Spotify" />
+        <HeaderLabel label="Lifecycle" value="Beta" />
+      </Header>
+      <Content className={classes.overflowXScroll}>
+        <ContentHeader title={pageTitle}>
+          <SupportButton>
+            This is used for visualizing the official guidelines of different
+            areas of software development such as languages, frameworks,
+            infrastructure and processes.
+          </SupportButton>
+        </ContentHeader>
+        <Grid container spacing={3} direction="row">
+          <Grid item xs={12} sm={6} md={4}>
+            <RadarComponent {...props} />
+          </Grid>
         </Grid>
-      </Grid>
-    </Content>
-  </Page>
-);
+      </Content>
+    </Page>
+  );
+};
 
 RadarPage.defaultProps = {
   title: 'Tech Radar',