Add padding to QueryExecutionStatus text

[gabrieldutra]

What type of PR is this? (check all applicable)

• Bug Fix

Description

Add padding to QueryExecutionStatus text

Related Tickets & Documents

Fixes #4550

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

[kravets-levko]

@gabrieldutra Maybe, just hide button with visibility: hidden instead of conditionally rendering it? Then it will be invisible, but browser will preserve space for it. Or render a placeholder element of the same height as button has? (that's just ideas, I didn't try your solution yet 😬)

[gabrieldutra]

Maybe, just hide button with visibility: hidden instead of conditionally rendering it? Then it will be invisible, but browser will preserve space for it. Or render a placeholder element of the same height as button has? (that's just ideas, I didn't try your solution yet )

visibility: hidden was one option I considered, one problem is that it takes width space too (for errors, or smaller screens it may be relevant). My conclusion was that the simplest was to either add some padding to the text to make sure it had more height than the button or add a min-height prop. The padding felt like a quick-win, so I went with it.

[kravets-levko]

😎