[account-web-vault]: Modal CSS conflicts with bootstrap css

[cmcWebCode40]

Problem

The connect modal does not display when the package is used in a js framework set up with bootstrap CSS, this happens as a result of CSS conflict when the bootstrap/dist/css/bootstrap.min.css is imported

see the discord thread of the observation : https://discord.com/channels/664594912460668960/1026461094421729340/1028925314300129330

cc @nick-verida @tahpot

[cmcWebCode40]

@tahpot,

While going through ShinzoHiro#3741 observation concerning this error from the discord channel I could see where bootstrap defined this global CSS rule which overrides the hidden attribute set in our account vault modal

// Hidden attribute
//
// Always hide an element with the `hidden` HTML attribute.

[hidden] {
  display: none !important;
}

Removing the hidden attribute in the parent modal div from the account-web-vault packages resolves this because the parent div with class name verida-modal-wrapper has its initial display set to none .

What are your thoughts on this?

cc @nick-verida @aurelticot

[tahpot]

@cmcWebCode40 Sorry, I don't understand your question.

Do you have a proposed code change to review that fixes the problem?

[nick-verida]

After discussion, this ("Removing the hidden attribute in the parent modal div from the account-web-vault") seems like a good solution. @cmcWebCode40 will do a PR.

[cmcWebCode40]

@cmcWebCode40 Sorry, I don't understand your question.

Do you have a proposed code change to review that fixes the problem?

@taphot I have opened a PR that fixes the issue here https://github.com/verida/verida-js/pull/240