🐛 Bug Report: Switch style messed up when adding a long description

[firassziedan]

📜 Description

On the integrations page, within the integration popup, when a switch component is present as part of an integration option, and that switch component includes a lengthy description, there is a formatting issue where the description and the input element are not properly aligned.

👟 Reproduction steps

1- Edit/Create integration and that integration has a switch component and add a description to that component
2- open integrations pages
3- open the integration dialog

👍 Expected behavior

I believe it would be more visually appealing if the description were placed on a new line, separate from the input wrapper.

👎 Actual Behavior with Screenshots

Novu version

next

npm version

No response

node version

No response

📃 Provide any additional context for the Bug.

No response

👀 Have you spent some time to check if this bug has been raised before?

• I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to submit PR?

Yes I am willing to submit a PR!

[gitstart]

@firassziedan we would like to pick this up cc @scopsy @jainpawan21

[scopsy]

@gitstart I would love to close first the open PR's and merge them before we will assign more issues 🙏

[cdxgh]

@LetItRock, @scopsy I would like to work on this issue.

[jainpawan21]

@cdxgh how is it going with this issue?

[scopsy]

@nknyshov could you please take a look at this, and perhaps provide a design alternative in case you think it will be better?

[jainpawan21]

@firassziedan

Since we have updated integrations UI, could you please share the steps to reproduce?
I could not reproduce this

[firassziedan]

@jainpawan21 you can see it by open Generic SMS provider and scrolling to Authenticate by token field