fix

Author: lucasgoral

src/components/Yaml/YamlDiff.module.css

@@ -0,0 +1,9 @@
+.container {
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}

src/components/Yaml/YamlDiff.tsx

@@ -1,12 +1,16 @@
 import { FC } from 'react';
 
 import { YamlDiffEditor } from '../YamlEditor/YamlDiffEditor.tsx';
-
+import styles from './YamlDiff.module.css';
 type YamlDiffProps = {
   originalYaml: string;
   modifiedYaml: string;
 };
 
 export const YamlDiff: FC<YamlDiffProps> = ({ originalYaml, modifiedYaml }) => {
-  return <YamlDiffEditor original={originalYaml} modified={modifiedYaml} />;
+  return (
+    <div className={styles.container}>
+      <YamlDiffEditor original={originalYaml} modified={modifiedYaml} />
+    </div>
+  );
 };

src/components/Yaml/YamlViewDialog.module.css

@@ -0,0 +1,6 @@
+.wrapper {
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+}

src/components/Yaml/YamlViewDialog.tsx

@@ -2,7 +2,7 @@ import { Bar, Button, CheckBox, Dialog } from '@ui5/webcomponents-react';
 
 import { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-
+import styles from './YamlViewDialog.module.css';
 export type YamlViewDialogProps = {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
@@ -51,7 +51,7 @@ export const YamlViewDialog: FC<YamlViewDialogProps> = ({
         setIsOpen(false);
       }}
     >
-      {isOpen && dialogContent}
+      <div className={styles.wrapper}>{isOpen && dialogContent}</div>
     </Dialog>
   );
 };

src/components/Yaml/YamlViewer.module.css

@@ -1,5 +1,10 @@
 .container {
   position: relative;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .buttons {
@@ -19,4 +24,4 @@
     width: 32px;
     transform: translateY(1px);
   }
-}
+}

src/components/Yaml/YamlViewer.tsx

@@ -19,7 +19,6 @@ const SHOW_DOWNLOAD_BUTTON = false;
 
 export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename, yamlStringToCopy }) => {
   const { t } = useTranslation();
-  // const { isDarkTheme } = useTheme();
   const { copyToClipboard } = useCopyToClipboard();
   const downloadYaml = () => {
     const blob = new Blob([yamlString], { type: 'text/yaml' });
@@ -32,7 +31,7 @@ export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename, yamlStri
     document.body.removeChild(link);
     window.URL.revokeObjectURL(url);
   };
-  console.log(yamlString);
+
   return (
     <div className={styles.container}>
       <FlexBox className={styles.buttons} direction="Row" justifyContent="End" alignItems="Baseline" gap={16}>

src/lib/monaco.ts

@@ -13,48 +13,29 @@ loader.config({ monaco });
 export const GITHUB_LIGHT_DEFAULT = 'github-light-default';
 export const GITHUB_DARK_DEFAULT = 'github-dark-default';
 
-// Lightweight RGBA helper
-function rgba(hex: string, alpha: number) {
-  const h = hex.replace('#', '');
-  const v =
-    h.length === 3
-      ? h
-          .split('')
-          .map((c) => c + c)
-          .join('')
-      : h;
-  const n = parseInt(v, 16);
-  // If parse fails, fallback to transparent
-  if (Number.isNaN(n)) return `rgba(0,0,0,${alpha})`;
-  const r = (n >> 16) & 255;
-  const g = (n >> 8) & 255;
-  const b = n & 255;
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-
 // Inlined GitHub Light Default editor colors (subset focused on Monaco editor UI)
 const GITHUB_LIGHT_EDITOR_COLORS: monaco.editor.IColors = {
   'editor.foreground': '#1f2328',
   'editor.background': '#ffffff',
   'editorWidget.background': '#f6f8fa',
   'editor.lineHighlightBackground': '#eaeef2',
   'editorCursor.foreground': '#0969da',
-  'editor.selectionBackground': rgba('#0969da', 0.2),
-  'editor.inactiveSelectionBackground': rgba('#0969da', 0.07),
-  'editor.selectionHighlightBackground': rgba('#1a7f37', 0.25),
+  'editor.selectionBackground': '#0969da33', // 20% opacity
+  'editor.inactiveSelectionBackground': '#0969da12', // 7% opacity
+  'editor.selectionHighlightBackground': '#1a7f3740', // 25% opacity
   'editorLineNumber.foreground': '#8c959f',
   'editorLineNumber.activeForeground': '#1f2328',
-  'editorIndentGuide.background': rgba('#1f2328', 0.12),
-  'editorIndentGuide.activeBackground': rgba('#1f2328', 0.24),
+  'editorIndentGuide.background': '#1f23281f', // 12% opacity
+  'editorIndentGuide.activeBackground': '#1f23283d', // 24% opacity
   'editorGutter.background': '#ffffff',
   'editorHoverWidget.background': '#f6f8fa',
   'editorHoverWidget.border': '#d0d7de',
   'editorSuggestWidget.background': '#f6f8fa',
   'editorSuggestWidget.border': '#d0d7de',
   'editorWidget.border': '#d0d7de',
   'editorWhitespace.foreground': '#d0d7de',
-  'editor.wordHighlightBackground': rgba('#afb8c1', 0.5),
-  'editor.wordHighlightStrongBackground': rgba('#afb8c1', 0.3),
+  'editor.wordHighlightBackground': '#afb8c180', // 50% opacity
+  'editor.wordHighlightStrongBackground': '#afb8c14d', // 30% opacity
 };
 
 // Inlined GitHub Dark Default editor colors (subset focused on Monaco editor UI)
@@ -64,22 +45,22 @@ const GITHUB_DARK_EDITOR_COLORS: monaco.editor.IColors = {
   'editorWidget.background': '#161b22',
   'editor.lineHighlightBackground': '#161b22',
   'editorCursor.foreground': '#2f81f7',
-  'editor.selectionBackground': rgba('#2f81f7', 0.2),
-  'editor.inactiveSelectionBackground': rgba('#2f81f7', 0.07),
-  'editor.selectionHighlightBackground': rgba('#2ea043', 0.25),
+  'editor.selectionBackground': '#2f81f733', // 20% opacity
+  'editor.inactiveSelectionBackground': '#2f81f712', // 7% opacity
+  'editor.selectionHighlightBackground': '#2ea04340', // 25% opacity
   'editorLineNumber.foreground': '#6e7681',
   'editorLineNumber.activeForeground': '#e6edf3',
-  'editorIndentGuide.background': rgba('#e6edf3', 0.12),
-  'editorIndentGuide.activeBackground': rgba('#e6edf3', 0.24),
+  'editorIndentGuide.background': '#e6edf31f', // 12% opacity
+  'editorIndentGuide.activeBackground': '#e6edf33d', // 24% opacity
   'editorGutter.background': '#0d1117',
   'editorHoverWidget.background': '#161b22',
   'editorHoverWidget.border': '#30363d',
   'editorSuggestWidget.background': '#161b22',
   'editorSuggestWidget.border': '#30363d',
   'editorWidget.border': '#30363d',
   'editorWhitespace.foreground': '#484f58',
-  'editor.wordHighlightBackground': rgba('#6e7681', 0.5),
-  'editor.wordHighlightStrongBackground': rgba('#6e7681', 0.3),
+  'editor.wordHighlightBackground': '#6e768180', // 50% opacity
+  'editor.wordHighlightStrongBackground': '#6e76814d', // 30% opacity
 };
 
 export const configureMonaco = () => {