fix: Revert broken xterm css import

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

.changeset/funny-timers-visit.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-kubernetes-react': patch
+---
+
+Fix broken XtermJS CSS import

plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminal.tsx

@@ -13,9 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import 'xterm';
+import 'xterm/css/xterm.css';
 
 import { discoveryApiRef, useApi } from '@backstage/core-plugin-api';
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
@@ -37,12 +38,23 @@ export interface PodExecTerminalProps {
 const hasSocketProtocol = (url: string | URL) =>
   /wss?:\/\//.test(url.toString());
 
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    podExecTerminal: {
+      width: '100%',
+      height: '100%',
+      '& .xterm-screen': { padding: theme.spacing(1) },
+    },
+  }),
+);
+
 /**
  * Executes a `/bin/sh` process in the given pod's container and opens a terminal connected to it
  *
  * @public
  */
 export const PodExecTerminal = (props: PodExecTerminalProps) => {
+  const classes = useStyles();
   const { containerName, podNamespace, podName } = props;
 
   const [baseUrl, setBaseUrl] = useState(window.location.host);
@@ -122,10 +134,7 @@ export const PodExecTerminal = (props: PodExecTerminalProps) => {
     <div
       data-testid="terminal"
       ref={terminalRef}
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
+      className={classes.podExecTerminal}
     />
   );
 };