Tekton Plugin - Logo and Grafana Iframe Shrink Unexpectedly with Added Code

[angeelsanchez]

Bug Report

Description

When incorporating the provided code snippet within my constant, an unexpected issue arises where both the project logo (in the sidebar) and an iframe sourced from Grafana undergo an unintended reduction in size. This behavior is peculiar as there seems to be no apparent correlation between the introduced code and the visual elements affected.

The logo, which should maintain its original dimensions, and the Grafana iframe, displaying critical information, inexplicably shrink upon implementing the following code:

<EntityLayout.Route path="/tekton-janus" title="Janus">
  <EntitySwitch.Case if={isTektonCIAvailable}>
    {tektonContent}
  </EntitySwitch.Case>
</EntityLayout.Route>

What are the steps to reproduce this bug?

1. Install the plugin
2. Add de code snippet
3. Navigate to the janus-tekton page.

Versions of software used and environment

• React version: 18.2.0
• Node.js version: v18.18.2
• Other relevant libraries or dependencies:
  • @k-phoen/backstage-plugin-grafana: ^0.1.22

Additional Information

Curiously, the issue is immediately resolved when I comment out the specific lines of code mentioned above.

Screenshot

Let's skip that Grafana doesn't work, but number 2 would be the grafana iFrame (I don't know if I'm probably modifying more things)

With tektonContent

Without tektonContent

[angeelsanchez]

It seems that what is affecting the overall styles is this import.

in tekton/src/plugin.ts
import '@patternfly/react-core/dist/styles/base.css';

[ciiay]

Hi @angeelsanchez , can you check if you still experience this issue with the latest main branch code?