Poster: Fix focus lost after giving status/rating via quick btns (#657)

* Poster: Fix focus loss shrink issue

* 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/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 (

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;