fix thumbnail error tooltip position

hoist the tooltip when nested in a ingredient editor
also make the surrounding smaller so that the hoverable
area is just the icon and not the whole background

(cherry picked from commit ef0934d)

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -77,9 +77,10 @@ export default class PictureThumbnail extends HTMLElement {
 
   #onError(evt) {
     const message = `Could not load ${this.image.src}`
+    const hoist = this.closest(".ingredient-editor")
     this.spinner.stop()
     this.innerHTML = `
-      <sl-tooltip content="${message}">
+      <sl-tooltip content="${message}" ${hoist ? "hoist" : ""}>
         <alchemy-icon name="alert" class="error"></alchemy-icon>
       </sl-tooltip>
     `

app/javascript/alchemy_admin/components/picture_thumbnail.js

@@ -49,7 +49,7 @@ alchemy-uploader {
     text-decoration: none;
   }
 
-  alchemy-icon {
+  alchemy-icon:not(.error) {
     display: flex;
     width: var(--picture-width);
     height: var(--picture-height);

app/stylesheets/alchemy/admin/archive.scss

@@ -12,7 +12,7 @@ alchemy-icon {
   }
 
   &.error {
-    padding: 2rem;
+    padding: 0;
   }
 }