fix: fix diff app image size

sbb-design-systems · May 2, 2024 · 2e546d8 · 2e546d8
1 parent decbd57
commit 2e546d8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 24 deletions.
diff --git a/tools/visual-regression-testing/diff-app/src/components/test-case/image-diff/image-diff.scss b/tools/visual-regression-testing/diff-app/src/components/test-case/image-diff/image-diff.scss
@@ -58,12 +58,16 @@
 .app-image-button {
   @include sbb.button-reset;
 
-  display: block;
+  display: flex;
   width: 100%;
   text-align: left;
   cursor: pointer;
 
   &:focus-visible {
     @include sbb.focus-outline;
   }
+
+  &[hidden] {
+    display: none;
+  }
 }
diff --git a/tools/visual-regression-testing/diff-app/src/components/test-case/image-diff/image-diff.ts b/tools/visual-regression-testing/diff-app/src/components/test-case/image-diff/image-diff.ts
@@ -50,6 +50,7 @@ export class ImageDiff extends LitElement {
     const sbbOverlayElement: SbbOverlayElement = document.createElement('sbb-overlay');
     const appFullscreenDiff = document.createElement('app-fullscreen-diff');
 
+    sbbOverlayElement.expanded = true;
     appFullscreenDiff.selectedFile = selectedFile;
     appFullscreenDiff.failedFile = this.failedFile;
 
@@ -110,29 +111,25 @@ export class ImageDiff extends LitElement {
               </sbb-status>`}
         </div>
         <div class="app-image-failed">
-          ${this._showDiff && !this.failedFile.isNew
-            ? html`<button
-                @click=${() => this._showFullscreen('diffFile')}
-                class="app-image-button"
-              >
-                <img
-                  class="app-image"
-                  .src="./${this.failedFile?.diffFile}"
-                  alt=""
-                  @load=${this._setFailedImageDimension}
-                />
-              </button>`
-            : html`<button
-                @click=${() => this._showFullscreen('failedFile')}
-                class="app-image-button"
-              >
-                <img
-                  class="app-image"
-                  .src="./${this.failedFile?.failedFile}"
-                  alt=""
-                  @load=${this._setFailedImageDimension}
-                />
-              </button>`}
+          <button
+            @click=${() => this._showFullscreen('diffFile')}
+            class="app-image-button"
+            ?hidden=${!this._showDiff || this.failedFile.isNew}
+          >
+            <img class="app-image" .src="./${this.failedFile?.diffFile}" alt="" />
+          </button>
+          <button
+            @click=${() => this._showFullscreen('failedFile')}
+            class="app-image-button"
+            ?hidden=${this._showDiff && !this.failedFile.isNew}
+          >
+            <img
+              class="app-image"
+              .src="./${this.failedFile?.failedFile}"
+              alt=""
+              @load=${this._setFailedImageDimension}
+            />
+          </button>
         </div>
       </div>
     </div>`;