From e78a60f7714fb675e78c3c4e4d3d5b364773fc88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Pons?= <clement.pons@stms.fr>
Date: Wed, 18 Jun 2025 17:41:19 +0200
Subject: [PATCH] Rework Training Viewer rendering as vertical

---
 app.vue                              |   2 +-
 components/TrainingViewer.vue        | 101 +++++++--------------------
 db.sqlite-shm                        | Bin 32768 -> 32768 bytes
 db.sqlite-wal                        | Bin 2851072 -> 3675072 bytes
 layouts/default.vue                  |   2 +-
 pages/character/[id]/edit.client.vue |  31 +++-----
 pages/character/manage.client.vue    |  14 ++--
 7 files changed, 44 insertions(+), 106 deletions(-)

diff --git a/app.vue b/app.vue
index a37687e..3140f21 100644
--- a/app.vue
+++ b/app.vue
@@ -4,7 +4,7 @@
 		<NuxtLoadingIndicator />
 		<TooltipProvider>
 			<NuxtLayout>
-				<div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full relative *:overflow-x-hidden *:w-full *:h-full">
+				<div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full relative">
 					<NuxtPage />
 				</div>
 			</NuxtLayout>
diff --git a/components/TrainingViewer.vue b/components/TrainingViewer.vue
index 3c0e588..c253adf 100644
--- a/components/TrainingViewer.vue
+++ b/components/TrainingViewer.vue
@@ -2,11 +2,12 @@
 import { clamp } from '#shared/general.util';
 import { MAIN_STATS, mainStatTexts, type CharacterConfig } from '~/types/character';
 
-const { config } = defineProps<{
+const { config, progress = false } = defineProps<{
     config: CharacterConfig,
+    progress?: boolean,
 }>();
 
-const dragger = useTemplateRef<HTMLElement | null>('dragger'), items = useTemplateRef<HTMLElement[] | null>('items');
+const dragger = useTemplateRef<HTMLElement | null>('dragger');
 const position = ref(0), id = ref<number>(0);
 const dragging = ref(false), offset = ref(0);
 
@@ -18,8 +19,8 @@ const dragend = () => {
 };
 const dragmove = (e: MouseEvent) => {
     const box = dragger.value!.getBoundingClientRect();
-    offset.value = clamp(offset.value - e.movementX, 0, (320+32+2) * 16);
-    if(dragger.value) dragger.value.scrollLeft = offset.value;
+    offset.value = clamp(offset.value - e.movementY, 0, 100);
+    if(dragger.value) dragger.value.scrollTop = offset.value;
 };
 const dragstart = () => {
     window.addEventListener('mousemove', dragmove);
@@ -27,88 +28,36 @@ const dragstart = () => {
 
     dragging.value = true;
 };
-const wheel = (e: WheelEvent) => {
-    if(dragging.value) return;
-
-    const box = dragger.value!.getBoundingClientRect();
-    offset.value = clamp(offset.value + e.deltaY, 0, (320+32+2) * 16);
-    if(dragger.value) dragger.value.scrollLeft = offset.value;
-}
 onMounted(() => {
-
     dragger.value?.addEventListener('mousedown', dragstart);
-    dragger.value?.addEventListener('wheel', wheel);
-
-    transition(1, 0);
 });
 onUnmounted(() => {
     dragger.value?.removeEventListener('mousedown', dragstart);
-    dragger.value?.removeEventListener('wheel', wheel);
 });
-function transition(from: number, to: number)
-{
-    if(!items.value || from === to)
-        return;
-
-    position.value = to;
-    items.value![to].style.visibility = 'visible';
-    items.value![from].style.opacity = '0';
-    items.value![to].style.opacity = '1';
-
-    for(let i = 0; i < MAIN_STATS.length; i++)
-    {
-        if(i < to)
-            items.value![i].style.top = `-25%`;
-        else
-            items.value![i].style.top = `25%`;
-    }
-    items.value![to].style.top = `0%`;
-
-    clearTimeout(id.value);
-    //@ts-ignore
-    id.value = setTimeout(() => {
-        items.value![from].style.visibility = 'hidden';
-    }, 200);
-}
 </script>
 
-<!-- <template>
-    <div class="flex flex-1 flex-row justify-start w-full max-h-full h-full overflow-hidden gap-8 relative">
-        <div class="flex flex-col gap-3 relative items-center">
-            <span v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent 
-            hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="() => transition(position, i)"></span>
-            <span :style="{ 'top': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[top]
-            after:content-[attr(data-text)] after:absolute after:-top-2 after:left-4 after:p-px after:bg-light-0 dark:after:bg-dark-0"></span>
-        </div>
-        <div class="flex flex-1 flex-col justify-center relative cursor-grab" ref="dragger" :class="{ 'cursor-grabbing': dragging }">
-            <div v-for="(stat) of MAIN_STATS" :value="stat" class="flex-1 transition-[opacity,transform] items-center hidden absolute" ref="items" :style="{ 'left': `${-offset}%` }">
-                <div class="flex flex-row overflow-x-auto items-center w-full gap-4">
-                    <div class="w-96 flex flex-col gap-4 justify-between" v-for="(level, i) of config.training[stat]">
-                        <template v-for="(option) of level">
-                            <slot :stat="stat" :level="i" :option="option"></slot>
-                        </template>
-                    </div>
-                </div>
+<template>
+    <div class="flex flex-col relative max-w-full">
+        <div class="sticky top-8 w-full bg-light-0 dark:bg-dark-0 z-20 flex pt-2 pb-6">
+            <div class="flex flex-row gap-3 items-center relative w-48">
+                <span v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent 
+                hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="position = i"></span>
+                <span :style="{ 'left': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[left]
+                after:content-[attr(data-text)] after:absolute after:-translate-x-1/2 after:top-4 after:p-px after:bg-light-0 dark:after:bg-dark-0 after:text-center"></span>
+            </div>
+            <div>
+                <slot name="addin" :stat="MAIN_STATS[position]"></slot>
             </div>
         </div>
-    </div>
-</template> -->
-
-<template>
-    <div class="w-full h-full flex gap-8 max-w-full relative">
-        <div class="flex flex-col gap-3 relative items-center">
-            <span v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent 
-            hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="() => transition(position, i)"></span>
-            <span :style="{ 'top': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[top]
-            after:content-[attr(data-text)] after:absolute after:-top-2 after:left-4 after:p-px after:bg-light-0 dark:after:bg-dark-0"></span>
-        </div>
-        <div class="absolute top-0 left-24 z-10">
-            <slot name="addin" :stat="MAIN_STATS[position]"></slot>
-        </div>
-        <div ref="dragger" class="flex flex-col gap-4 pb-4 cursor-grab active:cursor-grabbing select-none overflow-hidden h-full w-full relative">
-            <div v-for="(stat, name) in config.training" class="flex flex-1 gap-4 items-center absolute h-full z-0" ref="items" :style="{ 'opacity': '0', 'visibility': 'hidden', 'transition': 'opacity 200ms ease-in-out, top 200ms ease-in-out' }">
-                <div v-for="(options, level) in stat" class="flex-shrink-0 w-80">
-                    <div class="space-y-2" @mousedown.stop>
+        <div ref="dragger" class="flex flex-1 px-8 overflow-hidden max-w-full">
+            <div class="relative cursor-grab active:cursor-grabbing select-none transition-[left] flex flex-1 flex-row max-w-full" >
+                <div class="flex flex-shrink-0 flex-col gap-4 relative w-full" v-for="(stat, name) in config.training" ><!-- v-for="(stat, name) in config.training"  -->
+                    <div class="flex flex-row gap-2 justify-center relative" v-for="(options, level) in stat">
+                        <template v-if="progress">
+                            <div class="absolute -left-8 -right-8 -top-2 h-px border-t border-light-30 dark:border-dark-30 border-dashed">
+                                <span class="absolute right-0 p-1 text-end">{{ level }}</span>
+                            </div>
+                        </template>
                         <template v-for="(option, i) in options">
                             <slot :stat="name" :level="level" :index="i" :option="option"></slot>
                         </template>
diff --git a/db.sqlite-shm b/db.sqlite-shm
index 222bca195b9b134789a53db3688ed69c8e63bae2..1cfbc09d0b89419d4918cc0efe4b9ddb50fd709a 100644
GIT binary patch
delta 607
zcmb7<M@&=!6h;5sBPfn#)Dg!DVnxJ4wL6IDV8M!mC<>y8y;mlg*|KKk#u%5bG(RfE
z-n%&Viegt(><z{FapTsLyyWHHmy^6eK!Je#uG)CRA}KUB!*KX8jLOiyGa<IYQys{1
zrj&$LRTR1+ON)Z;n$*(&y|>&JmbdXA{-#E_;RzK+S(*~}?8vv7F1aJj-HOJ{vF9e6
z!SwA8|6Uavej`e8%22kpX}>B|rGq-GqdKmWI<2!huZy~@E4r%dx~bc`tNW_aBR$qr
zJ=aUU)*HRkdwtYrebsmU)Gsy4287X+2<)_^HEn1|dpgjO&U7V;?)0FSmp;T2M?3==
zOd`poGL+$rWHf1{lfig0naE_OFpU{x<7GB;$YVYQ6talLEMXZdSj8IFv4Kr&p#-zQ
zzDs7k*C+ozm8((*bVx^ZOeb_oXLL>%bV=0;>Y8romhR}D9_XQJ^+eC~La$V(x2o3%
zebN_w(+@T1w+uuR!f8fxTF?pyZE+Hbi%xW*8_~qjliu{DAN?7?AQDK*B!wXiV+5mc
zGlsE@!@~q7k;PP|Gm}~5kjq@=k<S7aQbaLJS<XsUvzGO2WHVdwSwEG_tjlx8`~lZX
BpDh3Y

delta 214
zcmZo@U}|V!s+V}A%K!r6j0_AwB(Q~vfngVruhKK=(YgtCOGM17S$FSDmXK%p{^euE
z`{$&p2OAC~K<55O0#I=_h8m!)43iz1j5jVwVB9Rh<iNSPf-lN+^8`Kx=FOL!=LzsL
wFk~>)GsrV(Gr2N_GR@rF=vT}%c>>?R%^$*Rm^L^06)^!7^D%CI6Dy(w0QL<<>Hq)$

diff --git a/db.sqlite-wal b/db.sqlite-wal
index 2e01350f509165e8366722b5d579ea1ffb7c39c4..68a2550d99977040908f5da2f233f43ccc3dd370 100644
GIT binary patch
delta 5794
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

delta 96
zcmV~$*A0SD006)|D~gI@!QR2PB$^w=#6M?X6i4x{`usxq`i4?aQ`gYc(iZ9HiuLpj
iB!)&(V-r&|nYo3fm9>qnoxOvjle1jm;_Bx9emwv5bsqTu

diff --git a/layouts/default.vue b/layouts/default.vue
index f21f91d..546e43f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -39,7 +39,7 @@
 				</template>
 			</div>
         </div>
-        <div class="flex flex-1 flex-row relative max-w-[100vw] h-screen overflow-hidden">
+        <div class="flex flex-1 flex-row relative h-screen overflow-hidden">
 			<CollapsibleContent asChild forceMount>
 				<div class="bg-light-0 dark:bg-dark-0 z-40 w-screen md:w-[18rem] border-r border-light-30 dark:border-dark-30 flex flex-col justify-between my-2 max-md:data-[state=closed]:hidden">
 					<div class="flex-1 px-2 max-w-full max-h-full overflow-y-auto overflow-x-hidden">
diff --git a/pages/character/[id]/edit.client.vue b/pages/character/[id]/edit.client.vue
index c18702f..23944bd 100644
--- a/pages/character/[id]/edit.client.vue
+++ b/pages/character/[id]/edit.client.vue
@@ -251,8 +251,8 @@ useShortcuts({
                 <Tooltip side="right" message="Ctrl+S"><Button @click="() => save(true)">Enregistrer</Button></Tooltip>
             </div>
         </div>
-        <TabsRoot class="flex flex-1 flex-col justify-start items-center gap-4 px-8 w-full overflow-hidden" default-value="people">
-            <TabsList class="flex flex-row gap-4 self-center relative px-4">
+        <TabsRoot class="flex flex-1 flex-col justify-start items-center px-8 w-full overflow-y-auto" default-value="people">
+            <TabsList class="flex w-full flex-row gap-4 self-center items-center justify-center relative px-4 sticky top-0 bg-light-0 dark:bg-dark-0 z-20">
                 <TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
                 <TabsTrigger value="people" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Peuples</TabsTrigger>
                 <TabsTrigger :disabled="data.people === undefined" value="training" class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent">Entrainement</TabsTrigger>
@@ -260,14 +260,14 @@ useShortcuts({
                 <TabsTrigger :disabled="data.people === undefined" value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent">Sorts</TabsTrigger>
                 <TabsTrigger value="notes" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Notes</TabsTrigger>
             </TabsList>
-            <TabsContent value="people" class="flex-1 overflow-auto w-full h-full outline-none" forceMount>
+            <TabsContent value="people" class="flex-1 outline-none" forceMount>
                 <div class="m-2 overflow-auto">
                     <Combobox label="Peuple de votre personnage" v-model="data.people" :options="config.peoples.map((people, index) => [people.name, index])" @update:model-value="(index) => { data.people = index as number | undefined; data.leveling = [[1, 0]]}" />
                     <template v-if="data.people !== undefined">
                         <div class="w-full border-b border-light-30 dark:border-dark-30 pb-4">
                             <span class="text-sm text-light-70 dark:text-dark-70">{{ characterConfig.peoples[data.people].description }}</span>
                         </div>
-                        <div class="flex flex-col gap-4 max-h-[50vh] pe-4 relative">
+                        <div class="flex flex-col gap-4 pe-4 relative">
                             <span class="sticky top-0 py-1 bg-light-0 dark:bg-dark-0 z-10 text-xl">Niveaux restants: {{ data.level - (data.leveling?.length ?? 0) }}</span>
                             <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.peoples[data.people].options" :class="{ 'opacity-30': index > data.level }">
                                 <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-64" v-for="(option, i) of level" @click="selectRaceOption(parseInt(index as unknown as string, 10) as Level, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= data.level, '!border-accent-blue bg-accent-blue bg-opacity-20': data.leveling?.some(e => e[0] == index && e[1] === i) ?? false }"><MarkdownRenderer :content="raceOptionToText(option)" /></div>
@@ -276,32 +276,21 @@ useShortcuts({
                     </template>
                 </div>
             </TabsContent>
-            <TabsContent value="training" class="flex-1 overflow-hidden w-full h-full outline-none" forceMount>
-                <TrainingViewer :config="characterConfig">
+            <TabsContent value="training" class="flex-1 outline-none max-w-full" forceMount>
+                <TrainingViewer :config="characterConfig" progress>
                     <template #default="{ stat, level, option, index }">
-                        <div @click="switchTrainingOption(stat, parseInt(level as unknown as string, 10) as TrainingLevel, index)" :class="{ 'opacity-30': level > maxTraining[stat] + 1, 'hover:border-light-60 dark:hover:border-dark-60': level <= maxTraining[stat] + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': level == 0 || (data.training[stat]?.some(e => e[0] == level && e[1] === index) ?? false) }" class="border border-light-35 dark:border-dark-35 px-3 py-1 select-none cursor-pointer hover:border-light-50 dark:hover:border-dark-50">
+                        <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 max-w-[26rem] hover:border-light-50 dark:hover:border-dark-50" @click="switchTrainingOption(stat, parseInt(level as unknown as string, 10) as TrainingLevel, index)" :class="{ 'opacity-30': level > maxTraining[stat] + 1, 'hover:border-light-60 dark:hover:border-dark-60': level <= maxTraining[stat] + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': level == 0 || (data.training[stat]?.some(e => e[0] == level && e[1] === index) ?? false) }">
                             <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" />
                         </div>
                     </template>
                     <template #addin="{ stat }">
                         <div class="bg-light-0 dark:bg-dark-0 z-10">
                             <span class="text-xl" :class="{ 'text-light-red dark:text-dark-red': (trainingPoints ?? 0) < trainingSpent }">Points d'entrainement restants: {{ (trainingPoints ?? 0) - trainingSpent }}</span>
-                            <div class="py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 font-bold flex flex-row justify-between">
-                                <span class="flex gap-2" v-if="maxTraining[stat] >= 0">Niveau {{ maxTraining[stat] }}</span>
-                                <span class="flex gap-6">
-                                    Modifieur: +{{ modifiers[stat] }}
-                                    <NumberFieldRoot :default-value="data.modifiers[stat] ?? 0" v-model="data.modifiers[stat]" class="flex justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
-                        data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
-                                        <NumberFieldInput class="tabular-nums w-8 text-base font-normal bg-transparent px-2 outline-none caret-light-50 dark:caret-dark-50" />
-                                    </NumberFieldRoot>
-                                </span>
-                            </div>
-                            <div class="py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 justify-center items-center" :class="{ 'text-light-red dark:text-dark-red': (modifierPoints ?? 0) < modifierSpent }">Modifieur bonus: {{ modifierPoints - modifierSpent }}</div>
                         </div>
                     </template>
                 </TrainingViewer>
             </TabsContent>
-            <TabsContent value="abilities" class="flex-1 overflow-auto w-full h-full outline-none" forceMount>
+            <TabsContent value="abilities" class="flex-1 outline-none" forceMount>
                 <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
                     <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex justify-between">
                         <span class="text-xl -mx-2" :class="{ 'text-light-red dark:text-dark-red': (abilityPoints ?? 0) < abilitySpent }">Points d'entrainement restants: {{ (abilityPoints ?? 0) - abilitySpent }}</span>
@@ -321,7 +310,7 @@ useShortcuts({
                     </div>
                 </div>
             </TabsContent>
-            <TabsContent value="spells" class="flex-1 overflow-auto w-full h-full outline-none" forceMount>
+            <TabsContent value="spells" class="flex-1 outline-none" forceMount>
                 <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
                     <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 items-center">
                         <span class="text-xl pe-4" :class="{ 'text-light-red dark:text-dark-red': spellsPoints < (data.spells?.length ?? 0) }">Sorts: {{ data.spells?.length ?? 0 }}/{{ spellsPoints }}</span>
@@ -352,7 +341,7 @@ useShortcuts({
                     </div>
                 </div>
             </TabsContent>
-            <TabsContent value="notes" class="flex-1 overflow-auto w-full h-full outline-none" forceMount>
+            <TabsContent value="notes" class="flex-1 outline-none" forceMount>
                 <Editor class="min-h-[400px] border border-light-30 dark:border-dark-30" :v-model="data.notes" />
             </TabsContent>
         </TabsRoot>
diff --git a/pages/character/manage.client.vue b/pages/character/manage.client.vue
index 0b13734..a12e38e 100644
--- a/pages/character/manage.client.vue
+++ b/pages/character/manage.client.vue
@@ -18,7 +18,7 @@ function copy()
     <Head>
         <Title>d[any] - Edition de données</Title>
     </Head>
-    <TabsRoot class="flex flex-1 flex-col justify-start items-center gap-4 px-8 w-full overflow-hidden" default-value="training">
+    <TabsRoot class="flex flex-1 flex-col justify-start items-center gap-4 px-8 max-w-full overflow-hidden" default-value="training">
         <TabsList class="flex flex-row gap-4 self-center relative px-4">
             <TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
             <TabsTrigger value="peoples" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Peuples</TabsTrigger>
@@ -27,21 +27,21 @@ function copy()
             <TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Sorts</TabsTrigger>
             <Tooltip message="Copier le JSON" side="right"><Button icon @click="copy" class="p-2"><Icon icon="radix-icons:clipboard-copy" /></Button></Tooltip>
         </TabsList>
-        <TabsContent value="peoples" class="flex-1 overflow-auto outline-none">
+        <TabsContent value="peoples" class="flex-1 outline-none">
         </TabsContent>
-        <TabsContent value="training" class="flex-1 overflow-hidden w-full h-full outline-none">
-            <TrainingViewer :config="config">
+        <TabsContent value="training" class="flex-1 outline-none max-w-full">
+            <TrainingViewer :config="config" progress>
                 <template #default="{ stat, level, option }">
-                    <div class="border border-light-35 dark:border-dark-35 px-3 py-1 select-none cursor-pointer hover:border-light-50 dark:hover:border-dark-50">
+                    <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-96">
                         <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" />
                     </div>
                 </template>
             </TrainingViewer>
         </TabsContent>
-        <TabsContent value="abilities" class="flex-1 overflow-auto outline-none">
+        <TabsContent value="abilities" class="flex-1 outline-none">
 
         </TabsContent>
-        <TabsContent value="spells" class="flex-1 overflow-auto outline-none">
+        <TabsContent value="spells" class="flex-1 outline-none">
 
         </TabsContent>
     </TabsRoot>