Merge pull request #2066 from marcusljf/percentage-mobile-feb21

Percentage responsive update and fixes
dubinc · Feb 21, 2025 · 538b3e3 · 538b3e3
2 parents 3d9d3fb + c98ea1e
commit 538b3e3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 25 deletions.
diff --git a/apps/web/ui/analytics/bar-list.tsx b/apps/web/ui/analytics/bar-list.tsx
@@ -138,7 +138,6 @@ export function LineItem({
   title,
   href,
   value,
-  maxValue,
   totalSum,
   tab,
   unit,
@@ -152,7 +151,6 @@ export function LineItem({
   title: string;
   href?: string;
   value: number;
-  maxValue: number;
   totalSum: number;
   tab: string;
   unit: string;
@@ -174,7 +172,6 @@ export function LineItem({
   }, [icon, tab, title]);
 
   const { saleUnit } = useContext(AnalyticsContext);
-  const { isMobile } = useMediaQuery();
 
   const As = href ? Link : "div";
 
@@ -195,11 +192,27 @@ export function LineItem({
       className={cn(
         `block min-w-0 border-l-2 border-transparent px-4 py-1 transition-all`,
         href && hoverBackground,
-        isMobile || isModalView ? "group" : "",
+        isModalView ? "group" : "",
       )}
     >
-      <div className="flex items-center justify-between">
-        <div className="relative z-10 flex h-8 w-full min-w-0 max-w-[calc(100%-2rem)] items-center">
+      <div
+        className={cn(
+          "relative flex items-center justify-between",
+          isModalView && "gap-16",
+        )}
+      >
+        <motion.div
+          style={{
+            width: `${percentage}%`,
+            position: "absolute",
+            inset: 0,
+          }}
+          className={cn("-z-10 h-full origin-left rounded-md", barBackground)}
+          transition={{ ease: "easeOut", duration: 0.3 }}
+          initial={{ transform: "scaleX(0)" }}
+          animate={{ transform: "scaleX(1)" }}
+        />
+        <div className="relative z-10 flex h-8 w-full min-w-0 max-w-[calc(100%-2rem)] items-center transition-[max-width] duration-300 ease-in-out group-hover:max-w-[calc(100%-5rem)]">
           {tab === "links" && linkData ? (
             <Tooltip content={<LinkPreviewTooltip data={linkData} />}>
               {lineItem}
@@ -217,18 +230,6 @@ export function LineItem({
           ) : (
             lineItem
           )}
-          <motion.div
-            style={{
-              width: `${(value / (maxValue || 0)) * 100}%`,
-            }}
-            className={cn(
-              "absolute h-full origin-left rounded-md",
-              barBackground,
-            )}
-            transition={{ ease: "easeOut", duration: 0.3 }}
-            initial={{ transform: "scaleX(0)" }}
-            animate={{ transform: "scaleX(1)" }}
-          />
         </div>
         <div className="z-10 flex items-center">
           <NumberFlow
@@ -239,9 +240,7 @@ export function LineItem({
             }
             className={cn(
               "z-10 px-2 text-sm text-neutral-600 transition-transform duration-300",
-              isMobile || isModalView
-                ? "-translate-x-14"
-                : "group-hover:-translate-x-14",
+              isModalView ? "-translate-x-14" : "group-hover:-translate-x-14",
             )}
             style={{
               // Adds translateZ(0) to fix transition jitter
@@ -252,7 +251,7 @@ export function LineItem({
                 ? {
                     style: "currency",
                     currency: "USD",
-                    // @ts-ignore – trailingZeroDisplay is a valid option but TS is outdated
+                    // @ts-ignore – trailingZeroDisplay is a valid option but TS is outdated
                     trailingZeroDisplay: "stripIfInteger",
                   }
                 : {
@@ -262,8 +261,8 @@ export function LineItem({
           />
           <div
             className={cn(
-              "absolute right-0 px-6 text-sm text-neutral-600/70 transition-all duration-300",
-              isMobile || isModalView
+              "absolute right-0 px-3 text-sm text-neutral-600/70 transition-all duration-300",
+              isModalView
                 ? "visible translate-x-0 opacity-100"
                 : "invisible translate-x-14 opacity-0 group-hover:visible group-hover:translate-x-0 group-hover:opacity-100",
             )}

diff --git a/apps/web/ui/analytics/main.tsx b/apps/web/ui/analytics/main.tsx
@@ -151,7 +151,7 @@ export default function Main() {
                             : totalEvents[id]
                         }
                         className={cn(
-                          "text-2xl font-medium sm:text-3xl",
+                          "text-xl font-medium sm:text-3xl",
                           showPaywall && "opacity-30",
                         )}
                         format={