From 9a4bf0602d49997b7a4907019f0556687fdaf905 Mon Sep 17 00:00:00 2001
From: Marcus <marcustyphoon@gmail.com>
Date: Sat, 8 Jul 2023 22:50:06 -0700
Subject: [PATCH] Implement miniature disable gifs labels

---
 src/scripts/accesskit.css             | 6 +++++-
 src/scripts/accesskit/disable_gifs.js | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/scripts/accesskit.css b/src/scripts/accesskit.css
index a1dd75904..8e85dcc59 100644
--- a/src/scripts/accesskit.css
+++ b/src/scripts/accesskit.css
@@ -4,7 +4,7 @@
   right: 1ch;
 
   height: 1em;
-  padding: 5px;
+  padding: 0.6ch;
   border-radius: 3px;
 
   background-color: rgb(var(--black));
@@ -18,6 +18,10 @@
   content: "GIF";
 }
 
+.xkit-paused-gif-label.mini {
+  font-size: 0.6rem;
+}
+
 .xkit-paused-gif {
   position: absolute;
   visibility: visible;
diff --git a/src/scripts/accesskit/disable_gifs.js b/src/scripts/accesskit/disable_gifs.js
index cfe1adb0b..422d27a8e 100644
--- a/src/scripts/accesskit/disable_gifs.js
+++ b/src/scripts/accesskit/disable_gifs.js
@@ -18,7 +18,9 @@ const pauseGif = function (gifElement) {
     canvas.getContext('2d').drawImage(image, 0, 0);
 
     const gifLabel = document.createElement('p');
-    gifLabel.className = 'xkit-paused-gif-label';
+    gifLabel.className = gifElement.clientWidth < 150
+      ? 'xkit-paused-gif-label mini'
+      : 'xkit-paused-gif-label';
 
     gifElement.parentNode.append(canvas, gifLabel);
   };