From daa3510d7310ba6dbb6efe0a9a8d586886a9bf36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Fri, 3 Jul 2026 16:27:19 +0400
Subject: [PATCH] =?UTF-8?q?style:=20fl=C3=A8ches=20de=20scroll=20des=20tab?=
 =?UTF-8?q?s=20plus=20visibles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/teks/teks.js | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/components/teks/teks.js b/components/teks/teks.js
index 649c5c2..90e231c 100644
--- a/components/teks/teks.js
+++ b/components/teks/teks.js
@@ -13,6 +13,8 @@ import slugify from 'slugify'
 
 import {styled} from '@mui/material/styles'
 import ExplicitIcon from '@mui/icons-material/Explicit'
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
 
 import Image from 'next/image'
 
@@ -225,7 +227,26 @@ export default function Teks({parole}) {
           scrollButtons
           allowScrollButtonsMobile
           centered={langArray.length === 0}
-          sx={{borderBottom: 1, borderColor: 'divider', mb: 2}}
+          slots={{
+            StartScrollButtonIcon: ArrowBackIosNewIcon,
+            EndScrollButtonIcon: ArrowForwardIosIcon
+          }}
+          sx={{
+            borderBottom: 1,
+            borderColor: 'divider',
+            mb: 2,
+            '& .MuiTabs-scrollButtons': {
+              width: 36,
+              height: 36,
+              borderRadius: '50%',
+              color: 'primary.main',
+              backgroundColor: 'action.hover',
+              mx: 0.5,
+              '&.Mui-disabled': {
+                opacity: 0
+              }
+            }
+          }}
         >
           <Tab label='Transcription' />
           {langArray.map(({title}) => (