From d6507947f57b84e7ed51c73d7596ab7df667d5de Mon Sep 17 00:00:00 2001
From: HAHALOSAH <67280050+HAHALOSAH@users.noreply.github.com>
Date: Sat, 11 May 2024 17:32:44 -0700
Subject: [PATCH] Plugin Settings: fix text overflow for long plugin names
 (#2383)

Co-authored-by: V <vendicated@riseup.net>
---
 src/components/VencordSettings/AddonCard.tsx | 20 ++++++++++--
 src/components/VencordSettings/addonCard.css | 33 ++++++++++++++++++++
 src/utils/constants.ts                       |  4 +++
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/components/VencordSettings/AddonCard.tsx b/src/components/VencordSettings/AddonCard.tsx
index c4c3aaca..1161a641 100644
--- a/src/components/VencordSettings/AddonCard.tsx
+++ b/src/components/VencordSettings/AddonCard.tsx
@@ -21,7 +21,7 @@ import "./addonCard.css";
 import { classNameFactory } from "@api/Styles";
 import { Badge } from "@components/Badge";
 import { Switch } from "@components/Switch";
-import { Text } from "@webpack/common";
+import { Text, useRef } from "@webpack/common";
 import type { MouseEventHandler, ReactNode } from "react";
 
 const cl = classNameFactory("vc-addon-");
@@ -42,6 +42,8 @@ interface Props {
 }
 
 export function AddonCard({ disabled, isNew, name, infoButton, footer, author, enabled, setEnabled, description, onMouseEnter, onMouseLeave }: Props) {
+    const titleRef = useRef<HTMLDivElement>(null);
+    const titleContainerRef = useRef<HTMLDivElement>(null);
     return (
         <div
             className={cl("card", { "card-disabled": disabled })}
@@ -51,7 +53,21 @@ export function AddonCard({ disabled, isNew, name, infoButton, footer, author, e
             <div className={cl("header")}>
                 <div className={cl("name-author")}>
                     <Text variant="text-md/bold" className={cl("name")}>
-                        {name}{isNew && <Badge text="NEW" color="#ED4245" />}
+                        <div ref={titleContainerRef} className={cl("title-container")}>
+                            <div
+                                ref={titleRef}
+                                className={cl("title")}
+                                onMouseOver={() => {
+                                    const title = titleRef.current!;
+                                    const titleContainer = titleContainerRef.current!;
+
+                                    title.style.setProperty("--offset", `${titleContainer.clientWidth - title.scrollWidth}px`);
+                                    title.style.setProperty("--duration", `${Math.max(0.5, (title.scrollWidth - titleContainer.clientWidth) / 7)}s`);
+                                }}
+                            >
+                                {name}
+                            </div>
+                        </div>{isNew && <Badge text="NEW" color="#ED4245" />}
                     </Text>
                     {!!author && (
                         <Text variant="text-md/normal" className={cl("author")}>
diff --git a/src/components/VencordSettings/addonCard.css b/src/components/VencordSettings/addonCard.css
index f2dee11d..e46e4c29 100644
--- a/src/components/VencordSettings/addonCard.css
+++ b/src/components/VencordSettings/addonCard.css
@@ -62,3 +62,36 @@
 .vc-addon-author::before {
     content: "by ";
 }
+
+.vc-addon-title-container {
+    width: 100%;
+    overflow: hidden;
+    height: 1.25em;
+    position: relative;
+}
+
+.vc-addon-title {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@keyframes vc-addon-title {
+    0% {
+        transform: translateX(0);
+    }
+
+    50% {
+        transform: translateX(var(--offset));
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+
+.vc-addon-title:hover {
+    overflow: visible;
+    animation: vc-addon-title var(--duration) linear infinite;
+}
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 09c27d15..c1e2cea2 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -462,6 +462,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "Oleh Polisan",
         id: 242305263313485825n
     },
+    HAHALOSAH: {
+        name: "HAHALOSAH",
+        id: 903418691268513883n
+    },
     GabiRP: {
         name: "GabiRP",
         id: 507955112027750401n