Training update, most of the styles in the old tips were standardized, before all the styles were hardcoded into the tip, the new tips may still have some hardcoded styles but the vast majority only uses standard html or custom ones that are picked up in FormatTip to attribute styles

src/pages/training/[id]/index.tsx

@@ -10,6 +10,7 @@ import clsx from "clsx";
 import Exercise from "@/training/Exercise";
 import TrainingScore from "@/training/TrainingScore";
 import {ITrainingContent, ITrainingTip} from "@/training/TrainingInterfaces";
+import formatTip from "@/training/FormatTip";
 import {Stat, User} from "@/interfaces/user";
 import Head from "next/head";
 import Layout from "@/components/High/Layout";
@@ -105,7 +106,9 @@ const TrainingContent: React.FC<{user: User}> = ({user}) => {
 					params: {ids: trainingContent.tip_ids},
 					paramsSerializer: (params) => qs.stringify(params, {arrayFormat: "repeat"}),
 				});
-				setTrainingTips(tips.data);
+
+				const processedTips = tips.data.map(formatTip);
+				setTrainingTips(processedTips);
 				setTrainingContent(withExamsStats);
 			} catch (error) {
 				router.push("/training");
@@ -338,7 +341,7 @@ const TrainingContent: React.FC<{user: User}> = ({user}) => {
 							</div>
 							<div className="flex -md:hidden">
 								<div className="rounded-3xl p-6 shadow-training-inset w-full">
-									<div className="flex flex-col p-10">
+									<div className="flex flex-col">
 										<Exercise key={currentTipIndex} {...trainingTips[currentTipIndex]} />
 									</div>
 									<div className="self-end flex justify-between w-full gap-8  bottom-8 left-0 px-8">