fix

Author: lucasgoral

src/components/ControlPlane/McpStatusSection.module.css

@@ -1,4 +1,5 @@
 .statusLabel {
   font-weight: bold;
   margin-bottom: 1rem;
+  margin-left: 0.6rem;
 }

src/components/Helper/AnimatedHoverTextButton.tsx

@@ -1,9 +1,9 @@
-import { Button, ButtonDomRef, Link, LinkDomRef, FlexBox, FlexBoxAlignItems, Text } from '@ui5/webcomponents-react';
+import { Button, ButtonDomRef, FlexBox, FlexBoxAlignItems } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-icons/dist/copy';
 import { JSX, useId, useState } from 'react';
 import type { Ui5CustomEvent } from '@ui5/webcomponents-react-base';
 import type { ButtonClickEventDetail } from '@ui5/webcomponents/dist/Button.js';
-import type { LinkClickEventDetail } from '@ui5/webcomponents/dist/Link.js';
+
 import styles from './AnimatedHoverTextButton.module.css';
 import { getClassNameForOverallStatus } from '../ControlPlane/MCPHealthPopoverButton.tsx';
 import { ReadyStatus } from '../../lib/api/types/crate/controlPlanes.ts';
@@ -12,9 +12,7 @@ type HoverTextButtonProps = {
   id?: string;
   text: string;
   icon: JSX.Element;
-  onClick: (
-    event: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail> | Ui5CustomEvent<LinkDomRef, LinkClickEventDetail>,
-  ) => void;
+  onClick: (event: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail>) => void;
   large?: boolean;
 };
 export const AnimatedHoverTextButton = ({ id, text, icon, onClick, large = false }: HoverTextButtonProps) => {
@@ -26,29 +24,30 @@ export const AnimatedHoverTextButton = ({ id, text, icon, onClick, large = false
   const content = (
     <FlexBox alignItems={FlexBoxAlignItems.Center}>
       {hover || large ? (
-        <Text
+        <span
           className={cx(styles.text, styles[getClassNameForOverallStatus(text as ReadyStatus)], {
             [styles.large]: large,
           })}
         >
           {text}
-        </Text>
+        </span>
       ) : null}
       {icon}
     </FlexBox>
   );
 
   if (large) {
     return (
-      <Link
+      <Button
         id={id}
+        design={'Transparent'}
         className={cx(styles.link, styles[getClassNameForOverallStatus(text ? (text as ReadyStatus) : undefined)])}
         onClick={onClick}
         onMouseLeave={() => setHover(false)}
         onMouseOver={() => setHover(true)}
       >
         {content}
-      </Link>
+      </Button>
     );
   }
 

src/spaces/mcp/pages/McpPage.tsx

@@ -1,5 +1,6 @@
 import {
-  BusyIndicator, FlexBox,
+  BusyIndicator,
+  FlexBox,
   ObjectPage,
   ObjectPageHeader,
   ObjectPageSection,
@@ -22,7 +23,7 @@ import { ManagedResources } from '../../../components/ControlPlane/ManagedResour
 import { ProvidersConfig } from '../../../components/ControlPlane/ProvidersConfig.tsx';
 import { Providers } from '../../../components/ControlPlane/Providers.tsx';
 import ComponentList from '../../../components/ControlPlane/ComponentList.tsx';
-import MCPHealthPopoverButton from '../../../components/ControlPlane/MCPHealthPopoverButton.tsx';
+
 import { useApiResource } from '../../../lib/api/useApiResource.ts';
 
 import { YamlViewButton } from '../../../components/Yaml/YamlViewButton.tsx';