From 47bc7146de5454944a591d863afb943395af50ed Mon Sep 17 00:00:00 2001
From: Mow910 <mohamednidbella@gmail.com>
Date: Wed, 18 Mar 2026 20:42:26 +0100
Subject: [PATCH] Update Twitch moderation template to improve grid
 responsiveness by changing column classes to 2xl and adjusting heights. Also,
 increase default shoutbox font size for better readability.

---
 webapp/templates/twitch-moderation.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/webapp/templates/twitch-moderation.html b/webapp/templates/twitch-moderation.html
index ba097cb..d2569fc 100644
--- a/webapp/templates/twitch-moderation.html
+++ b/webapp/templates/twitch-moderation.html
@@ -135,9 +135,9 @@
 		</div>
 	</div>
 
-	<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-12 gap-4">
+	<div class="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-12 gap-4">
 		<!-- Colonne 1 : Live Twitch -->
-		<div class="xl:col-span-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col xl:h-[640px]">
+		<div class="2xl:col-span-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col 2xl:h-[640px]">
 			<div class="aspect-video bg-gray-900">
 				<iframe
 					src="https://player.twitch.tv/?channel={{ twitch_channel }}&enableExtensions=true&muted={{ 'false' if is_live else 'true' }}&parent={{ embed_parent }}&player=popout&quality=auto&volume={{ '0.5' if is_live else '0' }}"
@@ -172,7 +172,7 @@
 		</div>
 
 		<!-- Colonne 2 : Chat bot Twitch -->
-		<div class="xl:col-span-3 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col xl:h-[640px]">
+		<div class="2xl:col-span-3 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col 2xl:h-[640px]">
 
 		<!-- === Contenu du chat (commun live / hors live) === -->
 		<div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex items-center justify-between">
@@ -242,7 +242,7 @@
 		</div>
 
 		<!-- Colonne 3 : Chat Twitch (compte personnel) -->
-		<div class="xl:col-span-3 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col xl:h-[640px]">
+		<div class="2xl:col-span-3 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col 2xl:h-[640px]">
 			<div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex items-center justify-between">
 				<h3 class="font-semibold text-gray-900 dark:text-white">Chat Twitch (compte perso)</h3>
 				<a href="https://www.twitch.tv/{{ twitch_channel }}/chat" target="_blank" class="text-xs text-purple-600 dark:text-purple-400 hover:underline">Ouvrir</a>
@@ -257,7 +257,7 @@
 		</div>
 
 		<!-- Colonne 4 : Shoutbox modérateurs -->
-		<div class="xl:col-span-2 section-card flex flex-col xl:h-[640px]">
+		<div class="2xl:col-span-2 section-card flex flex-col 2xl:h-[640px]">
 		<div class="section-card-header flex items-center justify-between">
 			<div class="flex items-center gap-2">
 				<svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a2 2 0 01-2-2v-6a2 2 0 012-2h8z"></path></svg>
@@ -291,7 +291,7 @@
 					<span id="shoutboxNewMsgText">Nouveaux messages</span>
 				</button>
 			</div>
-			<div class="w-28 border-l border-gray-700 bg-gray-900 p-2 overflow-y-auto" style="scrollbar-width: thin;">
+			<div class="w-24 border-l border-gray-700 bg-gray-900 p-2 overflow-y-auto" style="scrollbar-width: thin;">
 				<div class="text-xs text-gray-400 font-semibold mb-1.5">En ligne</div>
 				<div id="shoutboxOnlineList" class="space-y-1">
 					<div class="text-xs text-gray-600 italic">---</div>
@@ -1035,7 +1035,7 @@ var shoutboxTabVisible = true;
 var shoutboxAudioCtx = null;
 var shoutboxUnreadCount = 0;
 var shoutboxSoundEnabled = localStorage.getItem('shoutbox_sound') !== 'off';
-var shoutboxFontSizePx = parseInt(localStorage.getItem('shoutbox_fontsize')) || 12;
+var shoutboxFontSizePx = parseInt(localStorage.getItem('shoutbox_fontsize')) || 14;
 
 document.addEventListener('visibilitychange', function() {
 	shoutboxTabVisible = !document.hidden;