From aec4984387e1fdc2f3902a8be5c97937be6310fc Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Sun, 5 Apr 2026 11:39:42 +0300 Subject: [PATCH] Replace JS based tier width label solution with subgrid Main goal is to try to fix the infinite loop bug users are reporting on tier list maker but this also nicely simplifies the code --- .../components/TierRow.module.css | 9 ++++-- .../tier-list-maker/components/TierRow.tsx | 26 +--------------- .../contexts/TierListContext.tsx | 31 +------------------ .../routes/tier-list-maker.module.css | 9 ++++-- .../tier-list-maker-constants.ts | 1 - 5 files changed, 14 insertions(+), 62 deletions(-) diff --git a/app/features/tier-list-maker/components/TierRow.module.css b/app/features/tier-list-maker/components/TierRow.module.css index f74cb8f1d..7f746c77a 100644 --- a/app/features/tier-list-maker/components/TierRow.module.css +++ b/app/features/tier-list-maker/components/TierRow.module.css @@ -1,10 +1,12 @@ .container { - display: flex; - gap: var(--s-1); + display: grid; + grid-template-columns: subgrid; + grid-column: 1 / -1; min-height: 68px; } .tierLabel { + grid-column: 1; display: flex; align-items: center; justify-content: center; @@ -42,7 +44,7 @@ } .targetZone { - flex: 1; + grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s-1-5); @@ -75,6 +77,7 @@ } .arrowControls { + grid-column: 3; display: grid; grid-template-rows: 1fr 1fr; gap: var(--s-1); diff --git a/app/features/tier-list-maker/components/TierRow.tsx b/app/features/tier-list-maker/components/TierRow.tsx index ff1faed59..73d25d459 100644 --- a/app/features/tier-list-maker/components/TierRow.tsx +++ b/app/features/tier-list-maker/components/TierRow.tsx @@ -5,7 +5,6 @@ import { } from "@dnd-kit/sortable"; import clsx from "clsx"; import { ChevronDown, ChevronUp, Trash } from "lucide-react"; -import { useLayoutEffect, useRef } from "react"; import { Button } from "react-aria-components"; import { useTranslation } from "react-i18next"; import { SendouButton } from "~/components/elements/Button"; @@ -37,9 +36,6 @@ export function TierRow({ tier }: TierRowProps) { handleMoveTierDown, showTierHeaders, screenshotMode, - tierLabelWidth, - registerTierLabelWidth, - unregisterTierLabelWidth, } = useTierListState(); const items = getItemsInTier(tier.id); @@ -47,40 +43,20 @@ export function TierRow({ tier }: TierRowProps) { const { setNodeRef, isOver } = useDroppable({ id: tier.id, }); - const labelRef = useRef(null); - - // biome-ignore lint/correctness/useExhaustiveDependencies: tier.name impacts width - useLayoutEffect(() => { - if (labelRef.current) { - // Temporarily remove width constraint to measure natural width - const currentWidth = labelRef.current.style.width; - labelRef.current.style.width = "auto"; - const naturalWidth = labelRef.current.scrollWidth; - labelRef.current.style.width = currentWidth; - registerTierLabelWidth(tier.id, naturalWidth); - } - }, [tier.id, tier.name, registerTierLabelWidth]); const tierIndex = state.tiers.findIndex((t) => t.id === tier.id); const isFirstTier = tierIndex === 0; const isLastTier = tierIndex === state.tiers.length - 1; - const handleDelete = () => { - unregisterTierLabelWidth(tier.id); - handleRemoveTier(tier.id); - }; - return (
{showTierHeaders ? (
handleRemoveTier(tier.id)} variant="minimal-destructive" icon={} /> diff --git a/app/features/tier-list-maker/contexts/TierListContext.tsx b/app/features/tier-list-maker/contexts/TierListContext.tsx index dcd875482..9a28cdc55 100644 --- a/app/features/tier-list-maker/contexts/TierListContext.tsx +++ b/app/features/tier-list-maker/contexts/TierListContext.tsx @@ -1,14 +1,10 @@ import type { ReactNode } from "react"; -import { createContext, useContext, useRef, useState } from "react"; +import { createContext, useContext, useState } from "react"; import { useTierList } from "../hooks/useTierList"; -import { DEFAULT_TIER_LABEL_WIDTH } from "../tier-list-maker-constants"; type TierListContextType = ReturnType & { screenshotMode: boolean; setScreenshotMode: (value: boolean) => void; - tierLabelWidth: number; - registerTierLabelWidth: (tierId: string, width: number) => void; - unregisterTierLabelWidth: (tierId: string) => void; }; const TierListContext = createContext(null); @@ -16,28 +12,6 @@ const TierListContext = createContext(null); export function TierListProvider({ children }: { children: ReactNode }) { const state = useTierList(); const [screenshotMode, setScreenshotMode] = useState(false); - const [tierLabelWidth, setTierLabelWidth] = useState( - DEFAULT_TIER_LABEL_WIDTH, - ); - const widthsRef = useRef>(new Map()); - - const registerTierLabelWidth = (tierId: string, width: number) => { - widthsRef.current.set(tierId, width); - const maxWidth = Math.max(...widthsRef.current.values()); - if (maxWidth !== tierLabelWidth) { - setTierLabelWidth(maxWidth); - } - }; - - const unregisterTierLabelWidth = (tierId: string) => { - widthsRef.current.delete(tierId); - const values = [...widthsRef.current.values()]; - const maxWidth = - values.length > 0 ? Math.max(...values) : DEFAULT_TIER_LABEL_WIDTH; - if (maxWidth !== tierLabelWidth) { - setTierLabelWidth(maxWidth); - } - }; return ( {children} diff --git a/app/features/tier-list-maker/routes/tier-list-maker.module.css b/app/features/tier-list-maker/routes/tier-list-maker.module.css index f1ee0eaa6..1d160f435 100644 --- a/app/features/tier-list-maker/routes/tier-list-maker.module.css +++ b/app/features/tier-list-maker/routes/tier-list-maker.module.css @@ -8,9 +8,10 @@ } .tierList { - display: flex; - flex-direction: column; - gap: var(--s-2); + display: grid; + grid-template-columns: auto 1fr auto; + row-gap: var(--s-2); + column-gap: var(--s-1); margin-bottom: var(--s-6); } @@ -32,6 +33,7 @@ } .titleInput { + grid-column: 1 / -1; width: 100%; padding: 0 var(--s-2) var(--s-2) var(--s-2); font-size: var(--font-lg); @@ -53,6 +55,7 @@ } .authorSection { + grid-column: 1 / -1; display: flex; flex-direction: row; justify-content: center; diff --git a/app/features/tier-list-maker/tier-list-maker-constants.ts b/app/features/tier-list-maker/tier-list-maker-constants.ts index 09936e4b3..573d0cbf4 100644 --- a/app/features/tier-list-maker/tier-list-maker-constants.ts +++ b/app/features/tier-list-maker/tier-list-maker-constants.ts @@ -1,6 +1,5 @@ import type { TierListMakerTier } from "./tier-list-maker-schemas"; -export const DEFAULT_TIER_LABEL_WIDTH = 68; export const TIER_NAME_MAX_LENGTH = 50; export const TIER_NAME_FONT_SIZE_BREAKPOINTS = [