From aa3b88a7e4f6329a413e10a0e88c0b378ffa4a2c Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Sun, 13 Oct 2024 02:25:56 +0100
Subject: [PATCH 1/2] Poster: Fix focus loss shrink issue

---
 src/lib/poster/Poster.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/lib/poster/Poster.svelte b/src/lib/poster/Poster.svelte
index b372d345..3aba958b 100644
--- a/src/lib/poster/Poster.svelte
+++ b/src/lib/poster/Poster.svelte
@@ -33,6 +33,8 @@
 
   // If poster is active (scaled up)
   let posterActive = false;
+  // If mouse in on poster. Added to fix #656.
+  let mouseOverPoster = false;
 
   let containerEl: HTMLDivElement;
 
@@ -66,7 +68,6 @@
   }
 
   function handleInnerKeyUp(e: KeyboardEvent) {
-    console.log(e.target);
     if (e.key === "Enter" && (e.target as HTMLElement)?.id === "ilikemoviessueme") {
       if (typeof onClick !== "undefined") {
         onClick();
@@ -94,6 +95,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <li
   on:mouseenter={(e) => {
+    mouseOverPoster = true;
     if (!posterActive) calculateTransformOrigin(e);
     if (!isTouch()) {
       posterActive = true;
@@ -106,12 +108,15 @@
     }
   }}
   on:focusout={() => {
-    if (!isTouch()) {
+    if (!isTouch() && !mouseOverPoster) {
       // Only on !isTouch (to match focusin) to avoid breaking a tap and hold on link on mobile.
+      // and only if mouse isn't still over the poster, fixes focusout on click of rating/status
+      // poster buttons causing poster to shrink until refocused with click/mouse out & in again.
       posterActive = false;
     }
   }}
   on:mouseleave={() => {
+    mouseOverPoster = false;
     posterActive = false;
     const ae = document.activeElement;
     if (

From d34f9237aa5399bb14a9a5e5e519c83a5290aa86 Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Sun, 13 Oct 2024 02:38:58 +0100
Subject: [PATCH 2/2] PosterRating: Only add extra padding when is-minimal

So we don't alter the spacing when this  component is used on an actual posters
---
 src/lib/poster/PosterRating.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/lib/poster/PosterRating.svelte b/src/lib/poster/PosterRating.svelte
index fc5607f9..142c18b9 100644
--- a/src/lib/poster/PosterRating.svelte
+++ b/src/lib/poster/PosterRating.svelte
@@ -27,7 +27,8 @@
   class={[
     "rating",
     minimal ? (!rating ? "minimal" : "minimal-space") : "",
-    disableInteraction ? "interaction-disabled" : ""
+    disableInteraction ? "interaction-disabled" : "",
+    minimal ? "is-minimal" : ""
   ].join(" ")}
   on:click={(ev) => {
     ev.stopPropagation();
@@ -132,12 +133,16 @@
 
 <style lang="scss">
   button {
-    padding: 3px 8px;
+    padding: 3px;
     position: relative;
     font-family: "Rampart One";
     width: 100%;
     height: 100%;
 
+    &.is-minimal {
+      padding: 3px 8px;
+    }
+
     &.interaction-disabled {
       pointer-events: none;
       cursor: default;