Avoid applying quarto-figure CSS inside html widgets outputs

news/changelog-1.5.md

@@ -30,6 +30,10 @@ All changes included in 1.5:
 - ([#4802](https://github.com/quarto-dev/quarto-cli/issues/4802)): Change name of temporary input notebook to avoid accidental overwriting.
 - ([#8433](https://github.com/quarto-dev/quarto-cli/issues/8433)): Escape jupyter widget states that contain `</script>` so they can be embedded in HTML documents.
 
+## Knitr
+
+- ([#7843](https://github.com/quarto-dev/quarto-cli/issues/7843)): fix an issue with Quarto figure specific css rules applying inside HTML widgets output.
+
 ## Website Listings
 
 - ([#8147](https://github.com/quarto-dev/quarto-cli/issues/8147)): Ensure that listings don't include the contents of the output directory

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;
 }