Hello team, How can I increase the size of the bottom part of my diagram so I can see all the possibilities, instead of scrolling?

@Shuvam Manna ^

Hey @Michael Guirao, this was a weird implementation. We have newer designs in place to fix this legend issue. The changes shall be shipped very soon. But as of now, you unfortunately cannot change the height of this legend stack, unfortunately 😕

alright understood, when you say "very soon", should I expect that before end of year?

@Michael Guirao, if this is a high pain point for you and you really want to fix it before the SigNoz team releases the official updates, I have a hacky solution for you. You can override the CSS in your browser. If you use the Arc browser, you can use the “Boost” feature to override the CSS. If you use Chrome, you can either use a CSS override extension from the Chrome Store or create a custom extension for Chrome (it’s simple and requires only two files). I’ve attached a working extension for this solution, which you can try out if you’d like. CSS to override the legends:

.react-grid-layout .grid-item .ant-card-body {
  padding-bottom: 54px !important;
}
.react-grid-layout .u-legend {
  max-height: 84px;
  min-height: 84px;
  background: var(--bg-ink-300);
  padding: 16px;
  text-align: left;
}

Load the Extension in Chrome 1. Open Chrome and go to

<chrome://extensions/>

. 2. Enable “`Developer mode`” using the toggle in the top-right corner. 3. Click “`Load unpacked`” and select your extension’s project folder. 4. Your extension should now be installed, and the custom CSS will be applied to all websites. Attached the proof of concept.

@Sudeep MP Thank you very much for providing local solution for this. I'll definitely use it on my side.

you are welcome 🙂