fix(extensions): fix button position (#2567)

Signed-off-by: Christoph Jerolimov <jerolimov+git@redhat.com>

Author: christoph-jerolimov

workspaces/extensions/.changeset/itchy-years-care.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-extensions': patch
+---
+
+Improve button position and make the design independ from the fact if the global-header is installed/used or not.

workspaces/extensions/plugins/extensions/src/components/CodeEditor.tsx

@@ -18,7 +18,6 @@ import { useState, useCallback } from 'react';
 
 import { Progress } from '@backstage/core-components';
 
-import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
 import Typography from '@mui/material/Typography';
@@ -87,7 +86,7 @@ export const CodeEditor = ({
   };
 
   return (
-    <Box position="relative" sx={{ width: '100%', height: '100%' }}>
+    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
       <Button
         variant="text"
         onClick={handleCopy}
@@ -112,15 +111,18 @@ export const CodeEditor = ({
         )}
       </Button>
 
-      <Editor
-        theme={paletteMode}
-        defaultLanguage={defaultLanguage}
-        onChange={onChange}
-        onMount={onMount}
-        loading={<Progress />}
-        options={defaultOptions}
-        {...otherProps}
-      />
-    </Box>
+      {/* Use absolute to enforce the editor to use the right hight. */}
+      <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
+        <Editor
+          theme={paletteMode}
+          defaultLanguage={defaultLanguage}
+          onChange={onChange}
+          onMount={onMount}
+          loading={<Progress />}
+          options={defaultOptions}
+          {...otherProps}
+        />
+      </div>
+    </div>
   );
 };

workspaces/extensions/plugins/extensions/src/components/CodeEditorCard.tsx

@@ -15,7 +15,6 @@
  */
 
 import { lazy, Suspense } from 'react';
-import Grid from '@mui/material/Grid';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import { Progress } from '@backstage/core-components';
@@ -27,51 +26,28 @@ const CodeEditor = lazy(() =>
 
 export const CodeEditorCard = ({ onLoad }: { onLoad: () => void }) => {
   return (
-    <Grid
-      item
-      xs={12}
-      md={6.5}
-      sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}
-    >
-      <Card
-        sx={{
-          flex: 1,
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden',
-          borderRadius: 0,
-        }}
-      >
-        <CardContent
-          sx={{
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'auto',
-            scrollbarWidth: 'thin',
-          }}
-        >
-          <Suspense
-            fallback={
-              <div
-                style={{
-                  width: '100%',
-                  height: '100%',
-                  display: 'flex',
-                  alignItems: 'start',
-                  justifyContent: 'center',
-                }}
-              >
-                <div style={{ width: '100%', height: '100px' }}>
-                  <Progress />
-                </div>
+    <Card sx={{ flex: '1 1 0' }}>
+      <CardContent style={{ display: 'flex' }}>
+        <Suspense
+          fallback={
+            <div
+              style={{
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'start',
+                justifyContent: 'center',
+              }}
+            >
+              <div style={{ width: '100%', height: '100px' }}>
+                <Progress />
               </div>
-            }
-          >
-            <CodeEditor defaultLanguage="yaml" onLoaded={onLoad} />
-          </Suspense>
-        </CardContent>
-      </Card>
-    </Grid>
+            </div>
+          }
+        >
+          <CodeEditor defaultLanguage="yaml" onLoaded={onLoad} />
+        </Suspense>
+      </CardContent>
+    </Card>
   );
 };