Update CSS rules for images (#1777)

4 files changed, 19 insertions, 4 deletions

diff --git a/ext/css/display.css b/ext/css/display.css
index b23ae5e5..c6a39526 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -1128,6 +1128,7 @@ button.action-button[data-icon=source-term]::before {
     color: var(--text-color-light3);
 }
 .gloss-content {
+    display: block;
     white-space: pre-line;
 }
 .definition-disambiguation-list {
@@ -1153,6 +1154,9 @@ button.action-button[data-icon=source-term]::before {
     opacity: 0;
     white-space: pre-wrap;
 }
+.gloss-separator {
+    display: none;
+}
 .definition-item {
     display: list-item;
     position: relative;
@@ -1170,6 +1174,7 @@ button.action-button[data-icon=source-term]::before {
     flex-flow: row nowrap;
 }
 .definition-item-content {
+    width: 100%;
     flex: 1 1 auto;
     background-color: transparent;
     transition: background-color var(--animation-duration) ease-in-out;
@@ -2006,6 +2011,12 @@ button.footer-notification-close-button {
     display: inline;
     color: var(--text-color-light3);
 }
+:root[data-glossary-layout-mode=compact] .gloss-content {
+    display: inline;
+}
+:root[data-glossary-layout-mode=compact] .gloss-separator {
+    display: inline;
+}
 
 :root[data-show-pitch-accent-downstep-notation=true] .pitch-accent-disambiguation-list[data-term-count='0'],
 :root[data-show-pitch-accent-downstep-notation=true] .pitch-accent-disambiguation[data-type=reading] {
diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css
index ea0bf5cd..37cfde86 100644
--- a/ext/css/structured-content.css
+++ b/ext/css/structured-content.css
@@ -20,6 +20,7 @@
     display: inline-block;
     white-space: nowrap;
     max-width: 100%;
+    max-height: 100vh;
     position: relative;
     vertical-align: top;
     line-height: 0;
@@ -35,6 +36,7 @@
     display: inline-block;
     position: relative;
     line-height: 1;
+    max-width: 100%;
 }
 .gloss-image-link[href]:hover {
     cursor: pointer;
@@ -119,7 +121,7 @@
 :root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background {
     image-rendering: auto;
 }
-.gloss-image-link[data-has-aspect-ratio=true] .gloss-image-aspect-ratio-sizer {
+.gloss-image-link[data-has-aspect-ratio=true] .gloss-image-sizer {
     display: inline-block;
     width: 0;
     vertical-align: top;
diff --git a/ext/data/structured-content-style.json b/ext/data/structured-content-style.json
index 80a71e1c..cae7ff9f 100644
--- a/ext/data/structured-content-style.json
+++ b/ext/data/structured-content-style.json
@@ -5,6 +5,7 @@
             ["display", "inline-block"],
             ["white-space", "nowrap"],
             ["max-width", "100%"],
+            ["max-height", "100vh"],
             ["position", "relative"],
             ["vertical-align", "top"],
             ["line-height", "0"],
@@ -19,7 +20,8 @@
             ["color", "inherit"],
             ["display", "inline-block"],
             ["position", "relative"],
-            ["line-height", "1"]
+            ["line-height", "1"],
+            ["max-width", "100%"]
         ]
     },
     {
@@ -130,7 +132,7 @@
         ]
     },
     {
-        "selectors": [".gloss-image-link[data-has-aspect-ratio=true] .gloss-image-aspect-ratio-sizer"],
+        "selectors": [".gloss-image-link[data-has-aspect-ratio=true] .gloss-image-sizer"],
         "styles": [
             ["display", "inline-block"],
             ["width", "0"],
diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js
index 98706ca9..833df6f6 100644
--- a/ext/js/display/structured-content-generator.js
+++ b/ext/js/display/structured-content-generator.js
@@ -101,7 +101,7 @@ class StructuredContentGenerator {
         const imageContainer = this._createElement('span', 'gloss-image-container');
         node.appendChild(imageContainer);
 
-        const aspectRatioSizer = this._createElement('span', 'gloss-image-aspect-ratio-sizer');
+        const aspectRatioSizer = this._createElement('span', 'gloss-image-sizer');
         imageContainer.appendChild(aspectRatioSizer);
 
         const imageBackground = this._createElement('span', 'gloss-image-background');