fix: Size the gallery fallback icon frame to fill the thumbnail box (#2705)

- Closes: #2701

src/components/thumbnail/feature/thumbnail.ts

@@ -68,10 +68,15 @@ export class AdvancedCameraCardThumbnailFeatureThumbnail extends LitElement {
   }
 
   protected render(): TemplateResult | void {
-    const imageOff = html`<advanced-camera-card-icon
-      .icon=${{ icon: 'mdi:image-off' }}
-      title=${localize('thumbnail.no_thumbnail')}
-    ></advanced-camera-card-icon> `;
+    const renderIcon = (icon: string): TemplateResult =>
+      html`<div class="icon-container">
+        <advanced-camera-card-icon
+          .icon=${{ icon }}
+          title=${localize('thumbnail.no_thumbnail')}
+        ></advanced-camera-card-icon>
+      </div>`;
+
+    const imageOff = renderIcon('mdi:image-off');
 
     if (!this._embedThumbnailTask) {
       return imageOff;
@@ -83,11 +88,7 @@ export class AdvancedCameraCardThumbnailFeatureThumbnail extends LitElement {
           (embeddedThumbnail: string | null) =>
             embeddedThumbnail ? html`<img src="${embeddedThumbnail}" />` : html``,
           {
-            inProgressFunc: () =>
-              html`<advanced-camera-card-icon
-                .icon=${{ icon: 'mdi:image-refresh' }}
-                title=${localize('thumbnail.no_thumbnail')}
-              ></advanced-camera-card-icon> `,
+            inProgressFunc: () => renderIcon('mdi:image-refresh'),
             errorFunc: () => imageOff,
           },
         )

src/scss/thumbnail-feature-thumbnail.scss

@@ -37,16 +37,25 @@ img {
   object-fit: contain;
 }
 
-advanced-camera-card-icon {
+// The bordered frame occupies the same space an image would, with the icon
+// centered at half size within it.
+.icon-container {
+  width: 100%;
+  height: 100%;
+
   display: flex;
-  width: 50%;
-
-  --mdc-icon-size: 100%;
-  color: var(--primary-text-color);
-
   justify-content: center;
   align-items: center;
   border: 1px solid rgba(255, 255, 255, 0.3);
   box-sizing: border-box;
+  border-radius: var(--advanced-camera-card-border-radius-final);
   opacity: 0.2;
 }
+
+advanced-camera-card-icon {
+  width: 50%;
+  height: 50%;
+
+  --mdc-icon-size: 100%;
+  color: var(--primary-text-color);
+}