Changing orientation of hint action button?

[Jarvis]

Hi, I don’t know if this will be possible, but asking it in case it is. If I have a hint + an action in the hint, is it possible to make it so that the button is below the hint text? Right now, when I have a large amount of text in the hint, the button and text both get squished like the image below. It looks even worse on mobile devices.

Instead, it would make it much easier if it was below the hint text and spanned the entire width, similar to the orientation of this button below (which I made by adding a separate button):

I was wondering if it’s possible to do this via CSS

[Himaladin]

Haven’t you solved the problem without CSS? What is your problem?

[Jarvis]

Yes technically I have, but visually it would look better if the button were part of the hint.

[Himaladin]

So you mean the button should be inside the Hint component box?
Actually, you can use a rich text component with HTML and inline CSS instead of custom CSS, as this is much safer against potential changes.

[Jarvis]

Yes that’s what I meant. Since the hint component already has a button, instead of it being aligned to the right side, just wanted to move it to the bottom.

Also noted about the rich text component.

[Himaladin]

You may try it with GPT if you want to use richtext with HTML. Here is the code for custom CSS for Hint component:

.oneColumn-hint > div > div > div > div {
 display: block;
}
.oneColumn-hint button {
 width: 100%;
 margin-bottom:10px;
}
.oneColumn-hint p {
 width: 100%;
 padding-bottom:20px;
}

[Jarvis]

This worked perfectly! You’re a lifesaver!