From 7b33b223b612f1e9f1171ff32fb4fc49e069cd42 Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Tue, 24 Nov 2020 12:44:49 +0100
Subject: [PATCH] fix pacman translation overflow

---
 app/src/components/ApiWaitOverlay.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/src/components/ApiWaitOverlay.vue b/app/src/components/ApiWaitOverlay.vue
index fb3d39df..103bd0b5 100644
--- a/app/src/components/ApiWaitOverlay.vue
+++ b/app/src/components/ApiWaitOverlay.vue
@@ -8,7 +8,7 @@
 
     <template v-slot:overlay>
       <b-card no-body>
-        <div v-if="!error" class="d-flex justify-content-center mt-3">
+        <div v-if="!error" class="mt-3 px-3">
           <!-- <b-spinner /> -->
           <img class="pacman" src="@/assets/ajax-loader.gif">
         </div>
@@ -116,13 +116,14 @@ export default {
 }
 
 .pacman {
+  width: 24px;
   animation: back-and-forth 4s linear infinite;
 
   @keyframes back-and-forth {
-    0%, 100% { transform: translateX(-50vw) scale(1); }
-    49% { transform: translateX(50vw) scale(1); }
-    50% { transform: translateX(50vw) scale(-1); }
-    99% { transform: translateX(-50vw) scale(-1); }
+    0%, 100% { transform: scale(1); margin-left: 0; }
+    49% { transform: scale(1); margin-left: calc(100% - 24px);}
+    50% { transform: scale(-1); margin-left: calc(100% - 24px);}
+    99% { transform: scale(-1); margin-left: 0;}
   }
 }
 </style>