From 3e7e7be444548373c7bd22480780d29957373898 Mon Sep 17 00:00:00 2001
From: jaissonjpp <jaisson.jpp@gmail.com>
Date: Fri, 4 Sep 2026 13:29:20 -0300
Subject: [PATCH] feat(chat): add GIF scale setting in Site Layout -> Chat

---
 CHANGELOG-nightly.md                              |  4 ++++
 locale/en_US.yaml                                 |  4 ++++
 src/app/chat/MessageTokenGif.vue                  |  5 ++++-
 .../hidden-elements/HiddenElementsModule.vue      | 15 +++++++++++++++
 4 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
index 72ddf750..b7cfaa0c 100644
--- a/CHANGELOG-nightly.md
+++ b/CHANGELOG-nightly.md
@@ -1,3 +1,7 @@
+## 3.1.26.1000
+
+-   Added setting to resize GIFs in chat (Site Layout -> Chat)
+
 ## 3.1.25.1000
 
 -   Fixed Kick Emote Menu position
diff --git a/locale/en_US.yaml b/locale/en_US.yaml
index c7806607..22d393f3 100644
--- a/locale/en_US.yaml
+++ b/locale/en_US.yaml
@@ -171,3 +171,7 @@ settings:
     chat_alternating_background:
         label: Alternating Background
         hint: Display chat lines with alternating background colors
+    chat_gif_scale:
+        label: GIF Scale
+        hint: Change how large GIFs are displayed in chat messages
+
diff --git a/src/app/chat/MessageTokenGif.vue b/src/app/chat/MessageTokenGif.vue
index 74ea9b4d..122a2f47 100644
--- a/src/app/chat/MessageTokenGif.vue
+++ b/src/app/chat/MessageTokenGif.vue
@@ -4,6 +4,7 @@
 			class="seventv-chat-gif"
 			:src="token.content.url"
 			:alt="token.content.title || 'GIF'"
+			:style="{ maxHeight: `${24 * (gifScale ?? 1)}rem` }"
 			decoding="async"
 			draggable="false"
 		/>
@@ -22,12 +23,14 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import type { GifToken } from "@/common/chat/ChatMessage";
+import { useConfig } from "@/composable/useSettings";
 import ReportIcon from "@/assets/svg/icons/ReportIcon.vue";
 
 const props = defineProps<{
 	token: GifToken;
 }>();
 
+const gifScale = useConfig<number>("chat.gif_scale");
 const showReport = ref(!!props.token.content.report);
 
 function checkReport() {
@@ -90,7 +93,7 @@ function openReport() {
 .seventv-chat-gif {
 	display: block;
 	max-width: 100%;
-	max-height: 24rem;
+	max-height: calc(24rem * var(--seventv-gif-scale, 1));
 	border-radius: 0.4rem;
 }
 </style>
diff --git a/src/site/twitch.tv/modules/hidden-elements/HiddenElementsModule.vue b/src/site/twitch.tv/modules/hidden-elements/HiddenElementsModule.vue
index 1360a44b..bba5513b 100644
--- a/src/site/twitch.tv/modules/hidden-elements/HiddenElementsModule.vue
+++ b/src/site/twitch.tv/modules/hidden-elements/HiddenElementsModule.vue
@@ -74,6 +74,21 @@ export const config = [
 		hint: "If checked, the list of recent hype chats will be hidden",
 		defaultValue: false,
 	}),
+	declareConfig<number>("chat.gif_scale", "SLIDER", {
+		path: ["Site Layout", "Chat"],
+		label: "GIF Scale",
+		hint: "Change how large GIFs should be displayed in chat messages",
+		options: {
+			min: 0.1,
+			max: 1,
+			step: 0.05,
+			unit: "x",
+		},
+		defaultValue: 1,
+		effect(v) {
+			document.documentElement.style.setProperty("--seventv-gif-scale", `${v}`);
+		},
+	}),
 	declareConfig("chat.hide_timestamps_vods", "TOGGLE", {
 		label: "Hide VOD Timestamps",
 		path: ["Chat", "VODs"],