Avoid applying quarto-figure CSS inside html widgets outputs

news/changelog-1.4.md

@@ -216,6 +216,7 @@
 - ([#7002](https://github.com/quarto-dev/quarto-cli/issues/7002)): `layout-valign` is correctly forwarded to HTML to tweak vertical figure layout alignment for computational figures.
 - ([#5994](https://github.com/quarto-dev/quarto-cli/issues/5994)): Options like `include` or `echo` for `ojs` or `mermaid` cells are now correctly handled with knitr engine.
 - ([#4869](https://github.com/quarto-dev/quarto-cli/issues/4869)): `sql` cell output has now correct Quarto treatment so that specific features like `column: margin` works.
+- ([#7843](https://github.com/quarto-dev/quarto-cli/issues/7843)): fix an issue with Quarto figure specific css rules applying inside HTML widgets output.
 
 ## OJS engine
 

src/resources/formats/html/_quarto-rules.scss

@@ -112,15 +112,18 @@ figure .quarto-layout-row figure figcaption {
   margin-bottom: 0;
 }
 .quarto-figure-left > figure > p,
-.quarto-figure-left > figure > div /* for mermaid and dot diagrams */ {
+/* for mermaid and dot diagrams, excluding impact on htmlwidget output */ 
+.quarto-figure-left > figure > div:not(.html-widget, :nth-child(1):not(.html-widget)) {
   text-align: left;
 }
 .quarto-figure-center > figure > p,
-.quarto-figure-center > figure > div /* for mermaid and dot diagrams */ {
+/* for mermaid and dot diagrams, excluding impact on htmlwidget output */ 
+.quarto-figure-center > figure > div:not(.html-widget, :nth-child(1):not(.html-widget)) {
   text-align: center;
 }
 .quarto-figure-right > figure > p,
-.quarto-figure-right > figure > div /* for mermaid and dot diagrams */ {
+/* for mermaid and dot diagrams, excluding impact on htmlwidget output */ 
+.quarto-figure-right > figure > div:not(.html-widget, :nth-child(1):not(.html-widget)) {
   text-align: right;
 }