Added visible close button

src/lib/components/FullscreenViewer.js

@@ -8,6 +8,7 @@ export class FullscreenViewer extends BaseComponent {
   #imageElement = document.createElement('img');
   #spinnerElement = document.createElement('i');
   #sizeSelectorElement = document.createElement('select');
+  #closeButtonElement = document.createElement('i');
   /** @type {number|null} */
   #touchId = null;
   /** @type {number|null} */
@@ -29,9 +30,11 @@ export class FullscreenViewer extends BaseComponent {
     this.container.append(
       this.#spinnerElement,
       this.#sizeSelectorElement,
+      this.#closeButtonElement,
     );
 
     this.#spinnerElement.classList.add('spinner', 'fa', 'fa-circle-notch', 'fa-spin');
+    this.#closeButtonElement.classList.add('close', 'fa', 'fa-xmark');
     this.#sizeSelectorElement.classList.add('size-selector', 'input');
 
     for (const [sizeKey, sizeName] of Object.entries(FullscreenViewer.#previewSizes)) {

src/styles/content/listing.scss

@@ -206,6 +206,23 @@
     z-index: 1;
   }
 
+  .close {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 1;
+    padding: 5px;
+    background-color: colors.$text;
+    color: colors.$background;
+    font-size: 20px;
+    line-height: 20px;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    display: block;
+    cursor: pointer;
+  }
+
   &.shown {
     opacity: var(--opacity, 1);
     pointer-events: initial;