From de3307f031ffcb5877230a07a6ec287f626bb1f3 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 22 Sep 2022 21:48:21 +0300
Subject: [PATCH] Fix StatCategory bottom text not mobile friendly

---
 app/routes/analyzer.tsx | 13 +++++++++----
 app/styles/analyzer.css |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/routes/analyzer.tsx b/app/routes/analyzer.tsx
index 2476201bd..9248db963 100644
--- a/app/routes/analyzer.tsx
+++ b/app/routes/analyzer.tsx
@@ -389,7 +389,10 @@ export default function BuildAnalyzerPage() {
               />
             )}
           </StatCategory>
-          <StatCategory title={t("analyzer:stat.category.subDef")}>
+          <StatCategory
+            title={t("analyzer:stat.category.subDef")}
+            textBelow={t("analyzer:trackingSubDefExplanation")}
+          >
             <StatCard
               stat={analyzed.stats.subDefBombDamageLightPercentage}
               title={t("analyzer:stat.bombLdamage")}
@@ -449,9 +452,6 @@ export default function BuildAnalyzerPage() {
               })}
               suffix={t("analyzer:suffix.seconds")}
             />
-            <div className="analyzer__stat-category-explanation">
-              {t("analyzer:trackingSubDefExplanation")}
-            </div>
           </StatCategory>
 
           {analyzed.stats.damages.length > 0 && (
@@ -684,15 +684,20 @@ function StatCategory({
   title,
   children,
   containerClassName = "analyzer__stat-collection",
+  textBelow,
 }: {
   title: string;
   children: React.ReactNode;
   containerClassName?: string;
+  textBelow?: string;
 }) {
   return (
     <details>
       <summary className="analyzer__summary">{title}</summary>
       <div className={containerClassName}>{children}</div>
+      {textBelow && (
+        <div className="analyzer__stat-category-explanation">{textBelow}</div>
+      )}
     </details>
   );
 }
diff --git a/app/styles/analyzer.css b/app/styles/analyzer.css
index aebb7e321..2cfab5c31 100644
--- a/app/styles/analyzer.css
+++ b/app/styles/analyzer.css
@@ -167,7 +167,7 @@
 .analyzer__stat-category-explanation {
   color: var(--text-lighter);
   font-size: var(--fonts-xxs);
-  grid-column: 1 / 4;
+  margin-block-start: var(--s-3);
 }
 
 .analyzer__patch {