chore: expand leader schedule width

Author: asuzuki-jumptrading

src/features/LeaderSchedule/Slots/CardValidatorSummary.tsx

@@ -2,7 +2,12 @@ import type { TextProps } from "@radix-ui/themes";
 import { Box, Flex, Text } from "@radix-ui/themes";
 import { DateTime } from "luxon";
 import { useMemo } from "react";
-import { getStake, getFmtStake, isDefined, removePortFromIp } from "../../../utils";
+import {
+  getStake,
+  getFmtStake,
+  isDefined,
+  removePortFromIp,
+} from "../../../utils";
 import { useAtomValue } from "jotai";
 import PeerIcon from "../../../components/PeerIcon";
 import styles from "./cardValidatorSummary.module.css";
@@ -27,12 +32,13 @@ export default function CardValidatorSummary({
   const { pubkey, peer, isLeader, name } = useSlotInfo(slot);
 
   return (
-    <Flex gap="1">
+    <Flex gap="1" className={styles.summaryContainer}>
       <PeerIcon url={peer?.info?.icon_url} size={40} isYou={isLeader} />
       <Flex
         direction="column"
         gap="1"
         align="start"
+        minWidth="0"
         style={{ marginLeft: "6px" }}
       >
         <Text className={styles.name}>{name}</Text>

src/features/LeaderSchedule/Slots/SlotCardGrid.tsx

@@ -11,6 +11,7 @@ import { useMedia, usePrevious, useUnmount } from "react-use";
 import {
   defaultMaxComputeUnits,
   lamportsPerSol,
+  nonBreakingSpace,
   solDecimals,
 } from "../../../consts";
 import { formatNumberLamports } from "../../Overview/ValidatorsCard/formatAmt";
@@ -48,7 +49,7 @@ export default function SlotCardGrid({ slot, currentSlot }: SlotCardGridProps) {
   }, [deleteScroll, setScroll, slot]);
 
   return (
-    <Flex minWidth="0">
+    <Flex minWidth="0" flexGrow="1">
       <SlotColumn slot={slot} currentSlot={currentSlot} />
       <div
         className={styles.grid}
@@ -90,7 +91,6 @@ export default function SlotCardGrid({ slot, currentSlot }: SlotCardGridProps) {
         <Text
           className={clsx(styles.headerText, styles.computeUnitsHeader)}
           align="right"
-          style={{ gridColumnStart: "span 2" }}
         >
           Compute&nbsp;Units
         </Text>
@@ -363,22 +363,18 @@ function SlotCardRow({ slot, active }: SlotCardRowProps) {
         {getText(values?.durationText)}
       </Text>
       {values?.computeUnits !== undefined ? (
-        <>
-          <Text className={valueClassName} align="right" style={{ padding: 0 }}>
+        <Text className={valueClassName} align="right" style={{ padding: 0 }}>
+          <>
             {getText(values?.computeUnits.toLocaleString())}
-          </Text>
-          <Text className={valueClassName} align="right" style={{ padding: 0 }}>
-            {values?.computeUnitsPct !== undefined
-              ? `\u00A0(${getText(values?.computeUnitsPct)}%)`
-              : null}
-          </Text>
-        </>
+            <span className={styles.computeUnitsPct}>
+              {values?.computeUnitsPct !== undefined
+                ? `${nonBreakingSpace}(${getText(values?.computeUnitsPct)}%)`
+                : null}
+            </span>
+          </>
+        </Text>
       ) : (
-        <Text
-          className={valueClassName}
-          style={{ gridColumnStart: "span 2" }}
-          align="right"
-        >
+        <Text className={valueClassName} align="right">
           {getText()}
         </Text>
       )}

src/features/LeaderSchedule/Slots/UpcomingSlotCard.tsx

@@ -31,7 +31,7 @@ export default function UpcomingSlotCard({ slot }: UpcomingSlotCardProps) {
     currentLeaderSlot !== undefined &&
     slot === currentLeaderSlot + slotsPerLeader * 2;
 
-  const isWideScreen = useMedia("(min-width: 1200px)");
+  const isWideScreen = useMedia("(min-width: 1250px)");
 
   return (
     <div
@@ -78,13 +78,13 @@ function UpcomingSlotBody({
   slot,
 }: UpcomingSlotBodyProps) {
   return (
-    <Flex gap="2">
-      <Flex gap="2" minWidth="300px" align="center">
+    <Flex gap="2" align="center">
+      <Flex gap="2" minWidth="300px" width="505px" align="center" pr="20px">
         <PeerIcon url={iconUrl} size={24} isYou={isLeader} />
         <Text className={styles.nameText}>{name}</Text>
       </Flex>
       <Text className={styles.pubkeyText}>{pubkey}</Text>
-      <Flex flexGrow="1" justify="center">
+      <Flex justify="center" minWidth="190px">
         <Text>{slot}</Text>
       </Flex>
       <TimeTillText slot={slot} />

src/features/LeaderSchedule/Slots/cardValidatorSummary.module.css

@@ -5,12 +5,17 @@
   padding: 2px 5px;
 }
 
+.summary-container {
+  width: 40%;
+  min-width: 430px;
+}
+
 .name {
   color: var(--primary-text-color);
   font-size: 24px;
   line-height: normal;
-  width: 365px;
   min-width: 30px;
+  width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

src/features/LeaderSchedule/Slots/index.tsx

@@ -88,7 +88,7 @@ export default function Slots() {
       overflow="hidden"
       flexShrink="1"
       onWheel={handleWheel}
-      maxWidth="1200px"
+      maxWidth="100%"
       className={styles.scroll}
       ref={ref}
     >

src/features/LeaderSchedule/Slots/slotCardGrid.module.css

@@ -3,7 +3,7 @@
   grid:
     auto-flow / minMax(80px, auto) minMax(80px, auto) minMax(70px, auto)
     minMax(70px, auto)
-    minMax(75px, auto) minMax(100px, auto) minMax(49px, auto);
+    minMax(75px, auto) minMax(149px, auto);
   row-gap: 1px;
   overflow-x: auto;
   min-width: 80px;
@@ -43,6 +43,11 @@
   color: var(--compute-units-color);
 }
 
+.compute-units-pct {
+  width: 50px;
+  display: inline-block;
+}
+
 .slot-text {
   /* Slight padding to make it easier to text select the slot # */
   padding-left: 10px;

src/features/LeaderSchedule/Slots/upcomingSlot.module.css

@@ -6,19 +6,20 @@
   color: var(--primary-text-color);
 
   .name-text {
-    width: 240px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
   .pubkey-text {
+    flex-grow: 1;
     min-width: 390px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 
     &.narrow-screen {
+      flex-grow: 0;
       min-width: inherit;
     }
   }

src/routes/__root.tsx

@@ -10,6 +10,7 @@ import { isNavCollapsedAtom } from "../atoms";
 import { useAtom } from "jotai";
 import { headerSpacing, narrowNavMedia, slotsNavSpacing } from "../consts";
 import NavBlur from "../features/Navigation/NavBlur";
+import { useCurrentRoute } from "../hooks/useCurrentRoute";
 
 // import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 
@@ -60,6 +61,7 @@ function Root() {
 function OutletContainer() {
   const isNarrow = useMedia(narrowNavMedia);
   const [isNavCollapsed, setIsNavCollapsed] = useAtom(isNavCollapsedAtom);
+  const isSchedule = useCurrentRoute() === "Schedule";
 
   useEffect(() => {
     // automatically open / close on narrow switch
@@ -73,7 +75,7 @@ function OutletContainer() {
       minWidth="0"
       pb="2"
       pl={
-        isNarrow || isNavCollapsed
+        isNarrow || isNavCollapsed || isSchedule
           ? "0px"
           : `${headerSpacing - slotsNavSpacing}px`
       }

src/utils.ts

@@ -81,9 +81,7 @@ export function getDurationText(
   const values = getDurationValues(duration, options);
   if (!values) return "Never";
 
-  return values.reduce((acc, valSuffix) => {
-    return `${acc} ${valSuffix.join("")}`;
-  }, "");
+  return values.map(([val, suffix]) => `${val}${suffix}`).join(" ");
 }
 
 export let slowDateTimeNow = DateTime.now();