From d4b67c175a11cf8ebf8c980b577ad709a2535888 Mon Sep 17 00:00:00 2001
From: Manuel Alessandro Collazo <collazo.manuel6@gmail.com>
Date: Wed, 7 Jun 2023 18:48:49 +0200
Subject: [PATCH] fix: governance label styling

---
 .../gov/components/VoteProgress.module.scss   |  2 +-
 src/pages/gov/components/VoteProgress.tsx     | 38 ++++++++++++++++---
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/pages/gov/components/VoteProgress.module.scss b/src/pages/gov/components/VoteProgress.module.scss
index 5f938713a..a5842311d 100644
--- a/src/pages/gov/components/VoteProgress.module.scss
+++ b/src/pages/gov/components/VoteProgress.module.scss
@@ -5,7 +5,7 @@
 
   .label,
   .line {
-    transform: translate(-50%, 0);
+    transform: translate(var(--x-pos), 0);
   }
 }
 
diff --git a/src/pages/gov/components/VoteProgress.tsx b/src/pages/gov/components/VoteProgress.tsx
index 9c09f2172..f5bd9fec0 100644
--- a/src/pages/gov/components/VoteProgress.tsx
+++ b/src/pages/gov/components/VoteProgress.tsx
@@ -1,12 +1,40 @@
-import { PropsWithChildren } from "react"
-import classNames from "classnames"
-import { Flex } from "components/layout"
+import { useLayoutEffect, PropsWithChildren, useRef, useState } from "react"
 import styles from "./VoteProgress.module.scss"
+import { Flex } from "components/layout"
+import classNames from "classnames"
 
 const Flag = ({ left, children }: PropsWithChildren<{ left: string }>) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [width, setWidth] = useState(0)
+
+  useLayoutEffect(() => {
+    if (ref.current) setWidth(ref.current.offsetWidth)
+  }, [ref.current?.offsetWidth])
+
+  let maxTranslate = 45
+  switch (children) {
+    case "Pass Threshold":
+      maxTranslate = 45
+      break
+    case "Vote Threshold":
+      maxTranslate = 45.3
+      break
+    case "Quorum":
+      maxTranslate = 23.9
+      break
+  }
+
+  const translateStyle = {
+    "--x-pos":
+      (parseFloat(left) / 100) * width < maxTranslate
+        ? `-${(parseFloat(left) / 100) * width}px`
+        : "-50%",
+  } as React.CSSProperties
   return (
-    <div className={styles.flag} style={{ left }}>
-      <span className={styles.label}>{children}</span>
+    <div ref={ref} className={styles.flag} style={{ left }}>
+      <span className={styles.label} style={translateStyle}>
+        {children}
+      </span>
       <span className={styles.line} />
     </div>
   )