rumana-hf - Hey there! We've embedded each of t...
Hey there! We've embedded each of the features into a separate page and after the update, it feels like the header for Liveboards (we call Dashboards) and Answers (we call Visualisations) have moved to the left and is not aligned with the rest of the content. The content for Monitor Subscriptions seems correctly aligned. Is this possible to fix?


12 Replies
I agree that this looks bad when we put these pages in embed. Its a bug for which you should open a ticket. In the meantime, Ill try playing with Unstable CSS so we can unblock you
@utsav.kapoor - did you manage to find a solution here with Unstable CSS?
@Charlie Birch - This looks fixed in later releases so I am now trying to get older clusters to reproduce this and provide a solution. We can suggest this during the call as well
Ok perfect, thank you!
style: {
customCSS: {
rules_UNSTABLE: {
'.library-header-modulelibraryHeader': {
"margin-left": "24px !important",
"margin-top": "12px !important",
}
}
}
}
Hi @utsav.kapoor
Aditya (coudn't recognise the discord handle 😅 ) had provided this for us it doesn't resolve the issue.
Looking at the implementaion, there are different classes at play, I can try and play around but touching those classes seems to be risky.
For example, I can see **library-header-modulelibrarySeperator class used for Liveboards but for the Insights** its missing.
Also, the implementation seems to be different. Were you able to recreate the css that we can pass in the rules_UNSTABLE?
@rumana-hf FYI
@Charlie Birch keeping you in loop here
Thank you Suvash, I can confirm on my side I'm seeing the same behaviour in the playground, see screenshot.

hey team, any update on this 🙏
will update today in IST
hey team, coming back to this, this is working now. The suggestion from Aditya is correct. Thank you
fyi @Charlie Birch 🙏

What was the suggestion just for my learning?
I misinterepreted the UI 😅
style: {
customCSS: {
rules_UNSTABLE: {
'.library-header-modulelibraryHeader': {
"margin-left": "24px !important",
"margin-top": "12px !important",
}
}
}
}
this works for the alignment.
Follow up question:
why is UI for Liveboards and Monitors different? They seems to be following similar layoyut

