Add back content-visibility: auto and make image go upwards to not ge…

…t cut off when on bottom of entry container (#1738) * Add back `content-visibility: auto` and make image not get cut off when on bottom of entry container * Update tests
yomidevs · Jan 1, 2025 · 20a897f · 20a897f
1 parent 28bbc37
commit 20a897f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/ext/css/display.css b/ext/css/display.css
@@ -832,6 +832,7 @@ button.action-button:active {
 .entry {
     padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
     position: relative;
+    content-visibility: auto;
     contain-intrinsic-height: auto 500px;
 }
 .entry+.entry {

diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css
@@ -175,7 +175,8 @@
     z-index: 1;
 }
 .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsed=true] .gloss-image-container,
-:root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsible=true] .gloss-image-container {
+:root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsible=true] .gloss-image-container,
+:root[data-glossary-layout-mode=compact] .definition-item:nth-last-of-type(1) .gloss-image-link[data-collapsible=true] .gloss-image-container {
     bottom: 100%;
     top: auto;
 }

diff --git a/ext/data/structured-content-style.json b/ext/data/structured-content-style.json
@@ -252,7 +252,8 @@
     {
         "selectors": [
             ".entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsed=true] .gloss-image-container",
-            ":root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsible=true] .gloss-image-container"
+            ":root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsible=true] .gloss-image-container",
+            ":root[data-glossary-layout-mode=compact] .definition-item:nth-last-of-type(1) .gloss-image-link[data-collapsible=true] .gloss-image-container"
         ],
         "styles": [
             ["bottom", "100%"],