fix: tall image clipping in read alongs

Author: sergeleger

packages/web-component/src/components/read-along-component/read-along.tsx

@@ -1539,14 +1539,20 @@ export class ReadAlongComponent {
    *
    * @param props
    */
-  Img = (props: { imgURL: string }): Element => {
+  Img = (props: { imgURL: string; pageIndex: number }): Element => {
     return (
       <div
         class={
           "image__container page__col__image theme--" +
           this.userPreferences.theme
         }
       >
+        {this.mode === "EDIT" && (
+          <span id="image-container">
+            <this.RemoveImg pageIndex={props.pageIndex} />
+          </span>
+        )}
+
         <img alt={"image"} class="image" src={props.imgURL} />
       </div>
     );
@@ -1609,22 +1615,23 @@ export class ReadAlongComponent {
     const hasImage =
       props.pageIndex in this.images && this.images[props.pageIndex] !== null;
 
-    return (
-      <div class="image__container">
-        <span id="image-container">
-          {this.mode === "EDIT" && hasImage && (
-            <this.RemoveImg pageIndex={props.pageIndex} />
-          )}
-          {hasImage && <this.Img imgURL={this.images[props.pageIndex]} />}
-        </span>
-        {this.mode === "EDIT" && !hasImage && (
-          <this.ImgPlaceHolder
-            pageID={props.pageID}
-            pageIndex={props.pageIndex}
-          />
-        )}
-      </div>
-    );
+    if (hasImage) {
+      return (
+        <this.Img
+          imgURL={this.images[props.pageIndex]}
+          pageIndex={props.pageIndex}
+        />
+      );
+    }
+
+    if (this.mode === "EDIT") {
+      return (
+        <this.ImgPlaceHolder
+          pageID={props.pageID}
+          pageIndex={props.pageIndex}
+        />
+      );
+    }
   };
 
   /**

packages/web-component/src/scss/_shame.scss

@@ -58,7 +58,7 @@ p {
 }
 
 #img-remover {
-  margin: 60px;
+  margin: 0;
   position: absolute;
   z-index: functions.z("nav");
   border-radius: 50px;