[Canvas] Regression: embeddable frames show up as dashed grey frames

[kesslerm]

Kibana version: 7.13.4

Elasticsearch version:

Server OS version:

Browser version: any, tested with Firefox 90.0.2

Browser OS version: any, tested with Mac OS, Linux

Original install method (e.g. download page, yum, from source, etc.):

Describe the bug:

As a regression from pre-7.13 Kibana, previously invisible frames are now displayed as dashed grey frames and cannot easily be hidden by attaching custom CSS styles.

Steps to reproduce:

1. Place an embeddable frame on a canvas (e.g. time selector)
2. The frame will show up as a dashed frame with its light grey default colour, even if the parent elements have a different setting.

Expected behavior:

The embeddable frame should remain invisible

Screenshots (if relevant):

Errors in browser console (if relevant):

Provide logs and/or server output (if relevant):

Any additional context:

The current behaviour was introduced by https://github.com/elastic/kibana/pull/98507/files#diff-903b4c8556f82e2152dbc439f2a8d92022ec07e14ccc9c8038e163b2497c9996, which marked CSS elements a !important. Embeddable frames are reused in many contexts across Kibana. Maybe in Canvas a different class needs to be chosen for affected elements such as the time period chooser?

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[lucabelluccini]

Possible workaround described at https://discuss.elastic.co/t/how-to-remove-dotted-border-from-visualizations-when-imported-to-canvas-workpads/276785/2

In the expression editor, add to the render directive:

css=".embPanel--editing {
  border:none !important;
}"

[poffdeluxe]

Fixed by #113985