Skip to content

text alignment fix #1644

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ragnep merged 1 commit into from
Dec 12, 2025
Merged

text alignment fix #1644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions components/memes/drops/MemeParticipationDrop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
"use client";

import React, { useCallback, useState } from "react";
import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
import { ActiveDropState } from "@/types/dropInteractionTypes";
import DropListItemContentMedia from "@/components/drops/view/item/content/media/DropListItemContentMedia";
import { MobileVotingModal, VotingModal } from "@/components/voting";
import VotingModalButton from "@/components/voting/VotingModalButton";
import { DropInteractionParams, DropLocation } from "@/components/waves/drops/Drop";
import DropMobileMenuHandler from "@/components/waves/drops/DropMobileMenuHandler";
import WaveDropReactions from "@/components/waves/drops/WaveDropReactions";
import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
import { useDropInteractionRules } from "@/hooks/drops/useDropInteractionRules";
import useIsMobileDevice from "@/hooks/isMobileDevice";
import useIsMobileScreen from "@/hooks/isMobileScreen";
import MemeDropHeader from "./meme-participation-drop/MemeDropHeader";
import { ActiveDropState } from "@/types/dropInteractionTypes";
import { useCallback, useState } from "react";
import MemeDropActions from "./meme-participation-drop/MemeDropActions";
import MemeDropArtistInfo from "./meme-participation-drop/MemeDropArtistInfo";
import MemeDropDescription from "./meme-participation-drop/MemeDropDescription";
import MemeDropHeader from "./meme-participation-drop/MemeDropHeader";
import MemeDropVoteStats from "./meme-participation-drop/MemeDropVoteStats";
import MemeDropArtistInfo from "./meme-participation-drop/MemeDropArtistInfo";
import MemeDropActions from "./meme-participation-drop/MemeDropActions";
import MemeDropTraits from "./MemeDropTraits";
import DropMobileMenuHandler from "@/components/waves/drops/DropMobileMenuHandler";
import DropListItemContentMedia from "@/components/drops/view/item/content/media/DropListItemContentMedia";
import { VotingModal, MobileVotingModal } from "@/components/voting";
import VotingModalButton from "@/components/voting/VotingModalButton";
import WaveDropReactions from "@/components/waves/drops/WaveDropReactions";

interface MemeParticipationDropProps {
readonly drop: ExtendedDrop;
Expand Down Expand Up @@ -103,7 +103,7 @@ export default function MemeParticipationDrop({
<>
<div className="tw-p-4">
<MemeDropArtistInfo drop={drop} />
<div className="tw-flex tw-flex-col tw-mt-2 sm:tw-mt-1.5 sm:tw-ml-[3.75rem]">
<div className="tw-flex tw-flex-col tw-mt-2 sm:tw-mt-1.5 sm:tw-ml-[3.5rem]">
<MemeDropHeader title={title} />
<MemeDropDescription description={description} />
</div>
Expand Down
6 changes: 1 addition & 5 deletions components/waves/drops/ArtistPreviewModalHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,7 @@ export const ArtistPreviewModalHeader: React.FC<
<div className="tw-flex tw-gap-x-3 tw-justify-between">
<div className="tw-flex sm:tw-flex-row tw-flex-col sm:tw-items-center sm:tw-gap-4 tw-gap-3">
<div
className={`tw-h-12 tw-w-12 tw-flex-shrink-0 tw-rounded-lg tw-overflow-hidden tw-bg-iron-900 tw-border tw-border-solid ${
currentContentType === "winners"
? "tw-shadow-[0_1px_4px_rgba(251,191,36,0.15)] tw-border-[#E4CFA1]/5"
: "tw-border-white/10"
}`}
className="tw-h-11 tw-w-11 tw-flex-shrink-0 tw-rounded-lg tw-overflow-hidden tw-bg-iron-900 tw-border tw-border-solid tw-border-white/10"
>
{user.pfp && (
<img
Expand Down
34 changes: 17 additions & 17 deletions components/waves/drops/WaveDrop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
"use client";

import { memo, useCallback, useEffect, useState, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import { selectEditingDropId, setEditingDropId } from "@/store/editSlice";
import { useDropUpdateMutation } from "@/hooks/drops/useDropUpdateMutation";
import { ApiUpdateDropRequest } from "@/generated/models/ApiUpdateDropRequest";
import { ApiDrop } from "@/generated/models/ApiDrop";
import { ApiDropMentionedUser } from "@/generated/models/ApiDropMentionedUser";
import { ApiDropType } from "@/generated/models/ApiDropType";
import { ApiUpdateDropRequest } from "@/generated/models/ApiUpdateDropRequest";
import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
import { useDropUpdateMutation } from "@/hooks/drops/useDropUpdateMutation";
import useIsMobileDevice from "@/hooks/isMobileDevice";
import { selectEditingDropId, setEditingDropId } from "@/store/editSlice";
import { ActiveDropState } from "@/types/dropInteractionTypes";
import { memo, useCallback, useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { DropInteractionParams, DropLocation } from "./Drop";
Comment on lines +3 to +14
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Fix TypeScript: React.* types used without importing React.
After switching to named imports from "react", the file still references React.RefObject / React.TouchEvent, which will fail tsc --noEmit.

- import { memo, useCallback, useEffect, useRef, useState } from "react";
+ import {
+   memo,
+   useCallback,
+   useEffect,
+   useRef,
+   useState,
+   type RefObject,
+   type TouchEvent,
+ } from "react";

  interface WaveDropProps {
    readonly drop: ExtendedDrop;
    ...
-   readonly parentContainerRef?: React.RefObject<HTMLElement | null>;
+   readonly parentContainerRef?: RefObject<HTMLElement | null>;
  }

  const handleTouchStart = useCallback(
-   (e: React.TouchEvent) => {
+   (e: TouchEvent) => {
      ...
    },
    ...
  );

- const handleTouchEnd = useCallback((e: React.TouchEvent) => {
+ const handleTouchEnd = useCallback((e: TouchEvent) => {
    ...
  }, []);

- const handleTouchMove = useCallback((e: React.TouchEvent) => {
+ const handleTouchMove = useCallback((e: TouchEvent) => {
    ...
  }, []);

Also applies to: 117-132, 193-213

🤖 Prompt for AI Agents 
In components/waves/drops/WaveDrop.tsx around lines 3-14 (and also where
React.RefObject / React.TouchEvent are used at 117-132 and 193-213), the code
references React types but only uses named imports from "react"; add the missing
type imports (e.g., RefObject and TouchEvent — or any other React.* types used)
to the existing import from 'react' so the file imports these types directly (or
alternatively import React as a namespace), then update any type annotations if
necessary to use the newly imported names.

import WaveDropActions from "./WaveDropActions";
import WaveDropReply from "./WaveDropReply";
import WaveDropAuthorPfp from "./WaveDropAuthorPfp";
import WaveDropContent from "./WaveDropContent";
import WaveDropHeader from "./WaveDropHeader";
import WaveDropAuthorPfp from "./WaveDropAuthorPfp";
import WaveDropRatings from "./WaveDropRatings";
import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
import WaveDropMetadata from "./WaveDropMetadata";
import { ApiDrop } from "@/generated/models/ApiDrop";
import useIsMobileDevice from "@/hooks/isMobileDevice";
import WaveDropMobileMenu from "./WaveDropMobileMenu";
import { ApiDropType } from "@/generated/models/ApiDropType";
import { ActiveDropState } from "@/types/dropInteractionTypes";
import { DropInteractionParams, DropLocation } from "./Drop";
import WaveDropRatings from "./WaveDropRatings";
import WaveDropReactions from "./WaveDropReactions";
import WaveDropReply from "./WaveDropReply";

enum GroupingThreshold {
TIME_DIFFERENCE = 60000,
Expand Down Expand Up @@ -347,7 +347,7 @@ const WaveDrop = ({
<div
className="tw-flex tw-flex-col tw-w-full tw-gap-y-1"
style={{
maxWidth: showAuthorInfo ? "calc(100% - 3.25rem)" : "100%",
maxWidth: showAuthorInfo ? "calc(100% - 3.5rem)" : "100%",
}}>
{showAuthorInfo && (
<WaveDropHeader
Expand All @@ -361,7 +361,7 @@ const WaveDrop = ({
<div
className={
shouldGroupWithPreviousDrop && !isProfileView
? "tw-ml-[3.25rem]"
? "tw-ml-[3.5rem]"
: ""
}>
<WaveDropContent
Expand Down Expand Up @@ -391,7 +391,7 @@ const WaveDrop = ({
/>
)}
<div
className={`tw-mx-2 tw-flex tw-w-[calc(100%-3.25rem)] tw-ml-[3.25rem] tw-items-center tw-gap-x-2 tw-gap-y-1 tw-flex-wrap`}>
className={`tw-mx-2 tw-flex tw-w-[calc(100%-3.25rem)] tw-ml-[3.5rem] tw-items-center tw-gap-x-2 tw-gap-y-1 tw-flex-wrap`}>
{drop.metadata.length > 0 && (
<WaveDropMetadata metadata={drop.metadata} />
)}
Expand Down
13 changes: 2 additions & 11 deletions components/waves/drops/WaveDropAuthorPfp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,6 @@ interface WaveDropAuthorPfpProps {
}

const WaveDropAuthorPfp: React.FC<WaveDropAuthorPfpProps> = ({ drop }) => {
// Check if this drop author has any main stage winner drop IDs
const isFirstPlace =
drop.author.winner_main_stage_drop_ids &&
drop.author.winner_main_stage_drop_ids.length > 0;

const shadowClass = isFirstPlace
? "tw-shadow-[0_1px_4px_rgba(251,191,36,0.15)]"
: "";

const resolvedPfp = drop.author.pfp
? resolveIpfsUrlSync(drop.author.pfp)
: null;
Expand All @@ -29,14 +20,14 @@ const WaveDropAuthorPfp: React.FC<WaveDropAuthorPfpProps> = ({ drop }) => {
const profileHref = authorHandle ? `/${authorHandle}` : null;
const tooltipUser = authorHandle ?? drop.author.id;

const containerClasses = `tw-relative tw-flex-shrink-0 tw-h-12 tw-w-12 tw-rounded-lg tw-bg-iron-900 tw-overflow-hidden ${shadowClass}`;
const containerClasses = "tw-relative tw-flex-shrink-0 tw-h-11 tw-w-11 tw-rounded-lg tw-bg-iron-900 tw-overflow-hidden";

const avatarContent = resolvedPfp ? (
<Image
src={resolvedPfp}
alt={authorHandle ? `${authorHandle}'s profile picture` : "Profile picture"}
fill
sizes="48px"
sizes="44px"
className="tw-object-contain tw-rounded-lg tw-bg-transparent"
/>
) : (
Expand Down
18 changes: 9 additions & 9 deletions components/waves/drops/participation/ParticipationDropFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
"use client";

import { useState } from "react";
import { MobileVotingModal, VotingModal } from "@/components/voting";
import VotingModalButton from "@/components/voting/VotingModalButton";
import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
import { ParticipationDropRatings } from "./ParticipationDropRatings";
import { format } from "date-fns";
import { useDropInteractionRules } from "@/hooks/drops/useDropInteractionRules";
import { VotingModal, MobileVotingModal } from "@/components/voting";
import VotingModalButton from "@/components/voting/VotingModalButton";
import useIsMobileScreen from "@/hooks/isMobileScreen";
import { format } from "date-fns";
import { useState } from "react";
import WaveDropReactions from "../WaveDropReactions";
import { ParticipationDropRatings } from "./ParticipationDropRatings";

interface ParticipationDropFooterProps {
readonly drop: ExtendedDrop;
Expand All @@ -25,7 +25,7 @@ export default function ParticipationDropFooter({
<>
{canShowVote && (
<div
className="tw-@container sm:tw-ml-[3.25rem] tw-mt-4"
className="tw-@container sm:tw-ml-[3.5rem] tw-mt-4"
onClick={(e) => e.stopPropagation()}>
<div className="tw-flex @[700px]:tw-justify-between tw-flex-col @[700px]:tw-flex-row @[700px]:tw-items-center tw-gap-x-4 tw-gap-y-3">
<div className="tw-px-4">
Expand Down Expand Up @@ -60,16 +60,16 @@ export default function ParticipationDropFooter({

{/* Show ratings if no vote button */}
{!canShowVote && !!drop.raters_count && (
<div className="tw-mt-4 tw-px-4 tw-ml-[3.25rem]">
<div className="tw-mt-4 tw-px-4 tw-ml-[3.5rem]">
<ParticipationDropRatings drop={drop} rank={drop.rank} />
</div>
)}

<div className="tw-mt-4 tw-px-4 tw-flex tw-w-[calc(100%-3.25rem)] tw-ml-[3.25rem] tw-items-center tw-gap-x-2 tw-gap-y-1 tw-flex-wrap">
<div className="tw-mt-4 tw-px-4 tw-flex tw-w-[calc(100%-3.25rem)] tw-ml-[3.5rem] tw-items-center tw-gap-x-2 tw-gap-y-1 tw-flex-wrap">
<WaveDropReactions drop={drop} />
</div>
Comment on lines +68 to 70
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Fix width calc mismatch: calc(100% - 3.25rem) should match tw-ml-[3.5rem].
Right now the row is offset by 3.5rem but only shrinks by 3.25rem, which can cause subtle overflow/misalignment.

-      <div className="tw-mt-4 tw-px-4 tw-flex tw-w-[calc(100%-3.25rem)] tw-ml-[3.5rem] tw-items-center tw-gap-x-2 tw-gap-y-1 tw-flex-wrap">
+      <div className="tw-mt-4 tw-px-4 tw-flex tw-w-[calc(100%-3.5rem)] tw-ml-[3.5rem] tw-items-center tw-gap-x-2 tw-gap-y-1 tw-flex-wrap">
         <WaveDropReactions drop={drop} />
       </div>
🤖 Prompt for AI Agents 
In components/waves/drops/participation/ParticipationDropFooter.tsx around lines
68 to 70, the container uses tw-w-[calc(100%-3.25rem)] while the left margin is
tw-ml-[3.5rem], causing a 0.25rem mismatch and potential overflow; change the
calc to tw-w-[calc(100%-3.5rem)] (or otherwise ensure both values come from the
same constant/utility) so the width subtraction matches the left margin exactly.


<div className="tw-mt-4 tw-px-4 sm:tw-ml-[3.25rem] tw-pb-3 tw-text-[11px] tw-text-iron-500 tw-border-t tw-border-iron-800/30">
<div className="tw-mt-4 tw-px-4 sm:tw-ml-[3.5rem] tw-pb-3 tw-text-[11px] tw-text-iron-500 tw-border-t tw-border-iron-800/30">
{format(new Date(drop.created_at), "h:mm a · MMM d, yyyy")}
</div>
</>
Expand Down
39 changes: 19 additions & 20 deletions components/waves/drops/participation/ParticipationDropHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,30 +21,29 @@ export default function ParticipationDropHeader({

return (
<>
<div className="tw-flex tw-items-center tw-gap-x-4 tw-w-full">
<div className="tw-flex tw-items-center tw-gap-x-2">
<div className="tw-flex tw-items-center tw-gap-x-2">
<div className="tw-flex tw-items-center tw-gap-x-2">
<UserCICAndLevel
level={drop.author.level}
cicType={cicType}
size={UserCICAndLevelSize.SMALL}
/>

<p className="tw-text-md tw-mb-0 tw-leading-none tw-font-semibold">
<Link
onClick={(e) => e.stopPropagation()}
href={`/${drop.author.handle}`}
className="tw-no-underline tw-text-iron-200 hover:tw-text-iron-500 tw-transition tw-duration-300 tw-ease-out"
>
{drop.author.handle}
</Link>
</p>
</div>
<UserCICAndLevel
level={drop.author.level}
cicType={cicType}
size={UserCICAndLevelSize.SMALL}
/>

<div className="tw-size-[3px] tw-bg-iron-600 tw-rounded-full tw-flex-shrink-0"></div>
<WaveDropTime timestamp={drop.created_at} />
<p className="tw-text-md tw-mb-0 tw-leading-none tw-font-semibold">
<Link
onClick={(e) => e.stopPropagation()}
href={`/${drop.author.handle}`}
className="tw-no-underline tw-text-iron-200 hover:tw-text-iron-500 tw-transition tw-duration-300 tw-ease-out"
>
{drop.author.handle}
</Link>
</p>
</div>

<div className="tw-size-[3px] tw-bg-iron-600 tw-rounded-full tw-flex-shrink-0"></div>
<WaveDropTime timestamp={drop.created_at} />
</div>
<div className="tw-flex tw-items-center tw-gap-x-2">
{drop.rank && (
<WinnerDropBadge
rank={drop.rank}
Expand Down
6 changes: 3 additions & 3 deletions components/waves/drops/participation/ParticipationDropMetadata.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
"use client";

import { ApiDropMetadata } from "@/generated/models/ApiDropMetadata";
import { Tooltip } from "react-tooltip";
import { buildTooltipId } from "@/helpers/tooltip.helpers";
import useIsMobileDevice from "@/hooks/isMobileDevice";
import { useState } from "react";
import { buildTooltipId } from "@/helpers/tooltip.helpers";
import { Tooltip } from "react-tooltip";

interface ParticipationDropMetadataProps {
readonly metadata: ApiDropMetadata[];
Expand Down Expand Up @@ -69,7 +69,7 @@ export default function ParticipationDropMetadata({
};

return (
<div className="tw-px-4 sm:tw-ml-[3.25rem] tw-pt-4 tw-hidden lg:tw-block tw-border-t tw-border-iron-800/30">
<div className="tw-px-4 sm:tw-ml-[3.5rem] tw-pt-4 tw-hidden lg:tw-block tw-border-t tw-border-iron-800/30">
<div className="tw-grid tw-grid-cols-2 sm:tw-grid-cols-4 tw-gap-2">
{/* Always show first 2 items */}
{metadata.slice(0, 2).map((meta) => (
Expand Down
20 changes: 10 additions & 10 deletions components/waves/drops/winner/DefaultWinnerDrop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
"use client";

import { memo, useCallback, useState } from "react";
import Link from "next/link";
import { ApiDrop } from "@/generated/models/ApiDrop";
import { getWaveRoute } from "@/helpers/navigation.helpers";
import { Drop, ExtendedDrop } from "@/helpers/waves/drop.helpers";
import useIsMobileDevice from "@/hooks/isMobileDevice";
import { ActiveDropState } from "@/types/dropInteractionTypes";
import Link from "next/link";
import { memo, useCallback, useState } from "react";
import { DropInteractionParams, DropLocation } from "../Drop";
import { ApiDrop } from "@/generated/models/ApiDrop";
import WaveDropActions from "../WaveDropActions";
import WaveDropReply from "../WaveDropReply";
import WaveDropAuthorPfp from "../WaveDropAuthorPfp";
import WaveDropContent from "../WaveDropContent";
import WaveDropHeader from "../WaveDropHeader";
import WaveDropAuthorPfp from "../WaveDropAuthorPfp";
import WaveDropRatings from "../WaveDropRatings";
import WaveDropMetadata from "../WaveDropMetadata";
import WaveDropMobileMenu from "../WaveDropMobileMenu";
import { getWaveRoute } from "@/helpers/navigation.helpers";
import useIsMobileDevice from "@/hooks/isMobileDevice";
import WinnerDropBadge from "./WinnerDropBadge";
import WaveDropRatings from "../WaveDropRatings";
import WaveDropReactions from "../WaveDropReactions";
import WaveDropReply from "../WaveDropReply";
import WinnerDropBadge from "./WinnerDropBadge";

const getRankColorsByRank = (
rank: number | null
Expand Down Expand Up @@ -231,7 +231,7 @@ const DefaultWinnerDrop = ({
/>
</div>
)}
<div className="tw-flex tw-flex-col tw-gap-2 tw-ml-[3.25rem] tw-mt-1.5">
<div className="tw-flex tw-flex-col tw-gap-2 tw-ml-[3.5rem] tw-mt-1.5">
{drop.metadata.length > 0 && (
<WaveDropMetadata metadata={drop.metadata} />
)}
Expand Down
32 changes: 16 additions & 16 deletions components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
"use client";

import React, { useState } from "react";
import { createPortal } from "react-dom";
import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
import { WaveLeaderboardDropHeader } from "./header/WaveLeaderboardDropHeader";
import { WaveLeaderboardDropContent } from "../content/WaveLeaderboardDropContent";
import { WaveLeaderboardDropFooter } from "./footer/WaveLeaderboardDropFooter";
import { ApiWave } from "@/generated/models/ObjectSerializer";
import { useDropInteractionRules } from "@/hooks/drops/useDropInteractionRules";
import { WaveLeaderboardDropRaters } from "./header/WaveleaderboardDropRaters";
import WaveDropActionsOptions from "@/components/waves/drops/WaveDropActionsOptions";
import CommonDropdownItemsMobileWrapper from "@/components/utils/select/dropdown/CommonDropdownItemsMobileWrapper";
import { MobileVotingModal, VotingModal } from "@/components/voting";
import VotingModalButton from "@/components/voting/VotingModalButton";
import WaveDropActionsOpen from "@/components/waves/drops/WaveDropActionsOpen";
import WaveDropMobileMenuOpen from "@/components/waves/drops/WaveDropMobileMenuOpen";
import WaveDropActionsOptions from "@/components/waves/drops/WaveDropActionsOptions";
import WaveDropMobileMenuDelete from "@/components/waves/drops/WaveDropMobileMenuDelete";
import { VotingModal, MobileVotingModal } from "@/components/voting";
import VotingModalButton from "@/components/voting/VotingModalButton";
import WaveDropMobileMenuOpen from "@/components/waves/drops/WaveDropMobileMenuOpen";
import { ApiWave } from "@/generated/models/ObjectSerializer";
import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
import { useDropInteractionRules } from "@/hooks/drops/useDropInteractionRules";
import useIsMobileScreen from "@/hooks/isMobileScreen";
import useDeviceInfo from "@/hooks/useDeviceInfo";
import CommonDropdownItemsMobileWrapper from "@/components/utils/select/dropdown/CommonDropdownItemsMobileWrapper";
import useLongPressInteraction from "@/hooks/useLongPressInteraction";
import React, { useState } from "react";
import { createPortal } from "react-dom";
import { WaveLeaderboardDropContent } from "../content/WaveLeaderboardDropContent";
import { WaveLeaderboardDropFooter } from "./footer/WaveLeaderboardDropFooter";
import { WaveLeaderboardDropHeader } from "./header/WaveLeaderboardDropHeader";
import { WaveLeaderboardDropRaters } from "./header/WaveleaderboardDropRaters";

Comment on lines +3 to 22
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Search for the actual file with its correct casing
echo "=== Searching for the actual file ==="
fd -a "Wave.*DropRaters\.(ts|tsx)$" . | head -20

echo ""
echo "=== Checking all import statements with case-insensitive search ==="
rg -in "waveleaderboarddropraters|wavelearboard" . --type=ts --type=tsx | head -30

echo ""
echo "=== Checking specific import statements in the target file ==="
rg -n "WaveleaderboardDropRaters|WaveLeaderboardDropRaters" . --type=ts --type=tsx

Repository: 6529-Collections/6529seize-frontend

Length of output: 413

🏁 Script executed:

#!/bin/bash
# Read the specific import line from the target file to verify the exact casing
echo "=== Reading import lines from DefaultWaveLeaderboardDrop.tsx ==="
sed -n '1,30p' components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx | grep -i "waveleaderboard\|waveleaderboard"

echo ""
echo "=== Listing the actual header file to confirm casing ==="
ls -la components/waves/leaderboard/drops/header/ | grep -i raters

Repository: 6529-Collections/6529seize-frontend

Length of output: 733

🏁 Script executed:

#!/bin/bash
# Check the actual export from the WaveleaderboardDropRaters.tsx file
echo "=== Reading WaveleaderboardDropRaters.tsx export ==="
head -50 components/waves/leaderboard/drops/header/WaveleaderboardDropRaters.tsx | grep -E "export|const|function"

echo ""
echo "=== Check full export statement ==="
rg "export.*WaveLeaderboard|export.*Waveleaderboard" components/waves/leaderboard/drops/header/WaveleaderboardDropRaters.tsx -A 2

Repository: 6529-Collections/6529seize-frontend

Length of output: 643

Fix import path casing: file should be named WaveLeaderboardDropRaters.tsx.
The component exports WaveLeaderboardDropRaters but the file is named WaveleaderboardDropRaters.tsx (with lowercase 'leaderboard'). This mismatch will break on case-sensitive filesystems (Linux/macOS CI). Rename the file to match the exported component name.

🤖 Prompt for AI Agents 
In components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx around
lines 3 to 22, the import path for WaveLeaderboardDropRaters uses a filename
with a lowercase "leaderboard" that doesn't match the exported component name;
rename the physical file from WaveleaderboardDropRaters.tsx to
WaveLeaderboardDropRaters.tsx and update the import in this file to import {
WaveLeaderboardDropRaters } from "./header/WaveLeaderboardDropRaters"; ensure
git tracks the rename (use git mv) so case-only change is reflected on
case-insensitive systems and run the build to verify no other imports reference
the old casing.

interface DefaultWaveLeaderboardDropProps {
readonly drop: ExtendedDrop;
Expand Down Expand Up @@ -64,7 +64,7 @@ export const DefaultWaveLeaderboardDrop: React.FC<
onClick={() => onDropClick(drop)}
className="tw-@container tw-group tw-cursor-pointer tw-rounded-xl tw-transition tw-duration-300 tw-ease-out tw-w-full tw-relative">
<div className={getBorderClasses()} {...touchHandlers}>
<div className="tw-flex tw-flex-col">
<div className="tw-flex tw-flex-col tw-gap-3">
<div className="tw-flex tw-flex-col tw-gap-3">
<div className="tw-flex tw-items-center tw-justify-between tw-gap-4">
<WaveLeaderboardDropHeader drop={drop} />
Expand All @@ -84,7 +84,7 @@ export const DefaultWaveLeaderboardDrop: React.FC<
<WaveLeaderboardDropContent drop={drop} isCompetitionDrop={true} />
</div>
</div>
<div className="tw-mt-3 tw-inline-flex tw-flex-col @[700px]:tw-flex-row tw-justify-between @[700px]:tw-items-center sm:tw-ml-[3.25rem] tw-space-y-3 @[700px]:tw-space-y-0 tw-gap-x-2">
<div className="tw-mt-3 tw-inline-flex tw-flex-col @[700px]:tw-flex-row tw-justify-between @[700px]:tw-items-center sm:tw-ml-[3.5rem] tw-space-y-3 @[700px]:tw-space-y-0 tw-gap-x-2">
<div className="tw-flex tw-flex-wrap tw-items-center tw-gap-y-2 tw-gap-x-4">
<WaveLeaderboardDropRaters drop={drop} />
<WaveLeaderboardDropFooter drop={drop} wave={wave} />
Expand Down
Loading