fix: address feedback

Author: amliu-jumptrading

src/features/SlotDetails/DetailedSlotStats/ComputeSection/BusyAccounts.tsx

@@ -16,14 +16,15 @@ export default function BusyAccounts() {
   return (
     <SlotDetailsSubSection title="Top 5 Busy Accounts">
       <Grid
-        columns="repeat(5, auto) minmax(80px, 200px)"
+        columns="repeat(5, auto) minmax(80px, 100%)"
         gapX={gridGapX}
         gapY={gridGapY}
       >
         {limits.used_account_write_costs.map(({ account, cost }) => (
           <PctBarRow
             key={account}
-            label={`${account.substring(0, 8)}...`}
+            label={account}
+            labelWidth="80px"
             value={cost}
             total={limits.max_account_write_cost}
             valueColor="#30A46C"

src/features/SlotDetails/DetailedSlotStats/ComputeSection/ComputeUnitStats.tsx

@@ -50,30 +50,34 @@ export default function ComputeUnitStats() {
   if (!stats) return;
 
   const totalCus = stats.vote + stats.bundle + stats.other;
+  const maxCus = Math.max(stats.vote, stats.bundle, stats.other);
 
   return (
     <SlotDetailsSubSection title="Consumed Compute Units">
       <Grid
-        columns="repeat(5, auto) minmax(80px, auto)"
+        columns="repeat(5, auto) minmax(80px, 100%)"
         gapX={gridGapX}
         gapY={gridGapY}
       >
         <CuStatRow
           label="Vote"
           cus={stats.vote}
           totalCus={totalCus}
+          maxCus={maxCus}
           pctColor={votesColor}
         />
         <CuStatRow
           label="Bundle"
           cus={stats.bundle}
           totalCus={totalCus}
+          maxCus={maxCus}
           pctColor={bundleColor}
         />
         <CuStatRow
           label="Other"
           cus={stats.other}
           totalCus={totalCus}
+          maxCus={maxCus}
           pctColor={nonVoteColor}
         />
       </Grid>
@@ -85,11 +89,13 @@ interface CuStatRowProps {
   label: string;
   cus: number;
   totalCus: number;
+  maxCus: number;
   pctColor: string;
 }
 
-function CuStatRow({ label, cus, totalCus, pctColor }: CuStatRowProps) {
+function CuStatRow({ label, cus, totalCus, maxCus, pctColor }: CuStatRowProps) {
   const cuPctFromTotal = Math.round(totalCus ? (cus / totalCus) * 100 : 0);
+  const cuPctFromMax = Math.round(maxCus ? (cus / maxCus) * 100 : 0);
 
   return (
     <>
@@ -117,7 +123,7 @@ function CuStatRow({ label, cus, totalCus, pctColor }: CuStatRowProps) {
       >
         <rect
           height="8"
-          width={`${cuPctFromTotal}%`}
+          width={`${cuPctFromMax}%`}
           opacity={0.6}
           fill={pctColor}
         />

src/features/SlotDetails/DetailedSlotStats/ComputeSection/ProtocolLimitStats.tsx

@@ -17,7 +17,7 @@ export default function ProtocolLimitStats() {
   return (
     <SlotDetailsSubSection title="Protocol Limit Utilization">
       <Grid
-        columns="repeat(5, auto) minmax(80px, 250px)"
+        columns="repeat(5, auto) minmax(80px, 100%)"
         gapX={gridGapX}
         gapY={gridGapY}
       >

src/features/SlotDetails/DetailedSlotStats/ComputeSection/index.tsx

@@ -7,10 +7,10 @@ import ExecutionTime from "./ExecutionTime";
 
 export default function ComputeSection() {
   return (
-    <SlotDetailsSection title="Compute" flexBasis="0" flexGrow="2">
+    <SlotDetailsSection title="Compute" flexGrow="2">
       <ProtocolLimitStats />
-      <BusyAccounts />
       <ComputeUnitStats />
+      <BusyAccounts />
       <CumulativeExecutionTimeStats />
       <ExecutionTime />
     </SlotDetailsSection>

src/features/SlotDetails/DetailedSlotStats/FeeSection/index.tsx

@@ -5,7 +5,7 @@ import IncomeScatterCharts from "./IncomeScatterCharts";
 
 export default function FeeSection() {
   return (
-    <SlotDetailsSection title="Fees" flexBasis="0" flexGrow="2">
+    <SlotDetailsSection title="Fees" flexGrow="2">
       <FeeBreakdownStats />
       <IncomeDistributionCharts />
       <IncomeScatterCharts />

src/features/SlotDetails/DetailedSlotStats/PctBarRow.tsx

@@ -1,12 +1,15 @@
-import { Text } from "@radix-ui/themes";
+import { Text, Tooltip } from "@radix-ui/themes";
 import PctBar from "./PctBar";
 import styles from "./detailedSlotStats.module.css";
+import clsx from "clsx";
+import { useMemo } from "react";
 
 interface PctBarRowProps {
   label: string;
   value: number;
   total: number;
   valueColor: string;
+  labelWidth?: string;
   numeratorColor?: boolean;
   pctColor?: boolean;
 }
@@ -16,14 +19,26 @@ export default function PctBarRow({
   value,
   total,
   valueColor,
+  labelWidth,
   numeratorColor = true,
   pctColor = false,
 }: PctBarRowProps) {
   const pct = Math.round(total ? (value / total) * 100 : 0);
+  const labelEl = useMemo(
+    () => (
+      <Text
+        className={clsx(styles.label, labelWidth && styles.ellipsis)}
+        style={{ width: labelWidth }}
+      >
+        {label}
+      </Text>
+    ),
+    [label, labelWidth],
+  );
 
   return (
     <>
-      <Text className={styles.label}>{label}</Text>
+      {labelWidth ? <Tooltip content={label}>{labelEl}</Tooltip> : labelEl}
       <Text
         className={styles.value}
         style={{ color: numeratorColor ? valueColor : undefined }}

src/features/SlotDetails/DetailedSlotStats/PerformanceSection/index.tsx

@@ -13,7 +13,7 @@ export default function PerformanceSection() {
   const isNarrowScreen = useMedia("(max-width: 500px)");
 
   return (
-    <SlotDetailsSection title="Performance" flexBasis="0" flexGrow="3">
+    <SlotDetailsSection title="Performance" flexGrow="3">
       <Flex
         direction={isNarrowScreen ? "column" : "row"}
         gapX={sectionGapX}

src/features/SlotDetails/DetailedSlotStats/SlotDetailsHeader.tsx

@@ -39,7 +39,7 @@ export default function SlotDetailsHeader() {
   if (slot === undefined) return;
 
   return (
-    <Flex gapX="4" gapY="2" wrap="wrap" justify="between" align="center">
+    <Flex gapX="4" gapY="2" wrap="wrap" justify="start" align="center">
       <Flex gap="5px" align="center">
         <PeerIcon url={peer?.info?.icon_url} size={16} isYou={isLeader} />
         <Text className={styles.name}>{name}</Text>

src/features/SlotDetails/DetailedSlotStats/detailedSlotStats.module.css

@@ -57,3 +57,9 @@
   font-size: 8px;
   color: var(--gray-11);
 }
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}