From 0d65bd7a00f00ea70524bfbce1cafd36dba7f9bf Mon Sep 17 00:00:00 2001
From: ragnep <ragneinfo@gmail.com>
Date: Fri, 12 Dec 2025 12:43:42 +0200
Subject: [PATCH] wip

Signed-off-by: ragnep <ragneinfo@gmail.com>
---
 .../memes/drops/MemeParticipationDrop.tsx     | 24 ++++++------
 .../waves/drops/ArtistPreviewModalHeader.tsx  |  6 +--
 components/waves/drops/WaveDrop.tsx           | 34 ++++++++--------
 components/waves/drops/WaveDropAuthorPfp.tsx  | 13 +------
 .../participation/ParticipationDropFooter.tsx | 18 ++++-----
 .../participation/ParticipationDropHeader.tsx | 39 +++++++++----------
 .../ParticipationDropMetadata.tsx             |  6 +--
 .../waves/drops/winner/DefaultWinnerDrop.tsx  | 20 +++++-----
 .../drops/DefaultWaveLeaderboardDrop.tsx      | 32 +++++++--------
 .../header/WaveLeaderboardDropAuthor.tsx      | 14 ++++---
 .../winners/drops/DefaultWaveWinnerDrop.tsx   | 28 ++++++-------
 .../header/WaveWinnersDropHeaderAuthorPfp.tsx |  2 +-
 12 files changed, 112 insertions(+), 124 deletions(-)

diff --git a/components/memes/drops/MemeParticipationDrop.tsx b/components/memes/drops/MemeParticipationDrop.tsx
index e70166d51f..5bfaa5fdd3 100644
--- a/components/memes/drops/MemeParticipationDrop.tsx
+++ b/components/memes/drops/MemeParticipationDrop.tsx
@@ -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;
@@ -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>
diff --git a/components/waves/drops/ArtistPreviewModalHeader.tsx b/components/waves/drops/ArtistPreviewModalHeader.tsx
index 8298b40393..fbfb49fc3e 100644
--- a/components/waves/drops/ArtistPreviewModalHeader.tsx
+++ b/components/waves/drops/ArtistPreviewModalHeader.tsx
@@ -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
diff --git a/components/waves/drops/WaveDrop.tsx b/components/waves/drops/WaveDrop.tsx
index ea038fbfe2..5fd53b98a5 100644
--- a/components/waves/drops/WaveDrop.tsx
+++ b/components/waves/drops/WaveDrop.tsx
@@ -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";
 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,
@@ -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
@@ -361,7 +361,7 @@ const WaveDrop = ({
             <div
               className={
                 shouldGroupWithPreviousDrop && !isProfileView
-                  ? "tw-ml-[3.25rem]"
+                  ? "tw-ml-[3.5rem]"
                   : ""
               }>
               <WaveDropContent
@@ -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} />
           )}
diff --git a/components/waves/drops/WaveDropAuthorPfp.tsx b/components/waves/drops/WaveDropAuthorPfp.tsx
index 905bd12c40..9bbc79cf0d 100644
--- a/components/waves/drops/WaveDropAuthorPfp.tsx
+++ b/components/waves/drops/WaveDropAuthorPfp.tsx
@@ -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;
@@ -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"
     />
   ) : (
diff --git a/components/waves/drops/participation/ParticipationDropFooter.tsx b/components/waves/drops/participation/ParticipationDropFooter.tsx
index 556b961f2a..a7edae53e5 100644
--- a/components/waves/drops/participation/ParticipationDropFooter.tsx
+++ b/components/waves/drops/participation/ParticipationDropFooter.tsx
@@ -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;
@@ -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">
@@ -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>
 
-      <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>
     </>
diff --git a/components/waves/drops/participation/ParticipationDropHeader.tsx b/components/waves/drops/participation/ParticipationDropHeader.tsx
index b3e03ba621..051949d95a 100644
--- a/components/waves/drops/participation/ParticipationDropHeader.tsx
+++ b/components/waves/drops/participation/ParticipationDropHeader.tsx
@@ -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}
diff --git a/components/waves/drops/participation/ParticipationDropMetadata.tsx b/components/waves/drops/participation/ParticipationDropMetadata.tsx
index ea3ebc8ed9..fcc2213f39 100644
--- a/components/waves/drops/participation/ParticipationDropMetadata.tsx
+++ b/components/waves/drops/participation/ParticipationDropMetadata.tsx
@@ -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[];
@@ -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) => (
diff --git a/components/waves/drops/winner/DefaultWinnerDrop.tsx b/components/waves/drops/winner/DefaultWinnerDrop.tsx
index 797288fedb..d661936b78 100644
--- a/components/waves/drops/winner/DefaultWinnerDrop.tsx
+++ b/components/waves/drops/winner/DefaultWinnerDrop.tsx
@@ -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
@@ -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} />
           )}
diff --git a/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx b/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx
index 100d1352bb..942da3a16d 100644
--- a/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx
+++ b/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx
@@ -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";
 
 interface DefaultWaveLeaderboardDropProps {
   readonly drop: ExtendedDrop;
@@ -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} />
@@ -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} />
diff --git a/components/waves/leaderboard/drops/header/WaveLeaderboardDropAuthor.tsx b/components/waves/leaderboard/drops/header/WaveLeaderboardDropAuthor.tsx
index a9979f490a..e80e90cfe7 100644
--- a/components/waves/leaderboard/drops/header/WaveLeaderboardDropAuthor.tsx
+++ b/components/waves/leaderboard/drops/header/WaveLeaderboardDropAuthor.tsx
@@ -24,7 +24,7 @@ export const WaveLeaderboardDropAuthor: React.FC<
         onClick={(e) => e.stopPropagation()}
         className="tw-flex tw-items-center tw-gap-x-2 tw-no-underline group"
       >
-        <div className="tw-h-10 tw-w-10 tw-bg-iron-900 tw-relative tw-flex-shrink-0 tw-rounded-lg">
+        <div className="tw-h-11 tw-w-11 tw-bg-iron-900 tw-relative tw-flex-shrink-0 tw-rounded-lg">
           {drop.author.pfp ? (
             <div className="tw-rounded-lg tw-h-full tw-w-full">
               <div className="tw-h-full tw-w-full tw-max-w-full tw-rounded-lg tw-overflow-hidden tw-bg-iron-900 tw-ring-1 tw-ring-white/10">
@@ -42,7 +42,7 @@ export const WaveLeaderboardDropAuthor: React.FC<
           )}
         </div>
       </Link>
-      <div className="tw-flex tw-items-center tw-gap-x-4">
+      <div className="tw-flex tw-flex-col tw-gap-y-1.5">
         <div className="tw-flex tw-items-center tw-gap-x-2">
           <UserCICAndLevel
             level={drop.author.level}
@@ -65,10 +65,12 @@ export const WaveLeaderboardDropAuthor: React.FC<
 
           <WaveDropTime timestamp={drop.created_at} />
         </div>
-        <WinnerDropBadge
-          rank={drop.rank}
-          decisionTime={drop.winning_context?.decision_time || null}
-        />
+        <div className="tw-flex tw-items-center tw-gap-x-2">
+          <WinnerDropBadge
+            rank={drop.rank}
+            decisionTime={drop.winning_context?.decision_time || null}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/components/waves/winners/drops/DefaultWaveWinnerDrop.tsx b/components/waves/winners/drops/DefaultWaveWinnerDrop.tsx
index 2b5035abb0..f766c149c8 100644
--- a/components/waves/winners/drops/DefaultWaveWinnerDrop.tsx
+++ b/components/waves/winners/drops/DefaultWaveWinnerDrop.tsx
@@ -1,22 +1,22 @@
-import React from "react";
-import { createPortal } from "react-dom";
+import CommonDropdownItemsMobileWrapper from "@/components/utils/select/dropdown/CommonDropdownItemsMobileWrapper";
+import WaveDropActionsOpen from "@/components/waves/drops/WaveDropActionsOpen";
+import WaveDropMobileMenuOpen from "@/components/waves/drops/WaveDropMobileMenuOpen";
+import { ApiWaveDecisionWinner } from "@/generated/models/ApiWaveDecisionWinner";
+import { formatNumberWithCommas } from "@/helpers/Helpers";
 import {
-  ExtendedDrop,
-  convertApiDropToExtendedDrop,
+    ExtendedDrop,
+    convertApiDropToExtendedDrop,
 } from "@/helpers/waves/drop.helpers";
+import useDeviceInfo from "@/hooks/useDeviceInfo";
+import useLongPressInteraction from "@/hooks/useLongPressInteraction";
+import React from "react";
+import { createPortal } from "react-dom";
 import { WaveWinnersDropHeader } from "./header/WaveWinnersDropHeader";
-import { WaveWinnersDropContent } from "./WaveWinnersDropContent";
-import WaveWinnersDropOutcome from "./header/WaveWinnersDropOutcome";
-import { ApiWaveDecisionWinner } from "@/generated/models/ApiWaveDecisionWinner";
 import WaveWinnersDropHeaderAuthorPfp from "./header/WaveWinnersDropHeaderAuthorPfp";
 import WaveWinnersDropHeaderTotalVotes from "./header/WaveWinnersDropHeaderTotalVotes";
 import WaveWinnersDropHeaderVoters from "./header/WaveWinnersDropHeaderVoters";
-import useDeviceInfo from "@/hooks/useDeviceInfo";
-import useLongPressInteraction from "@/hooks/useLongPressInteraction";
-import WaveDropActionsOpen from "@/components/waves/drops/WaveDropActionsOpen";
-import CommonDropdownItemsMobileWrapper from "@/components/utils/select/dropdown/CommonDropdownItemsMobileWrapper";
-import WaveDropMobileMenuOpen from "@/components/waves/drops/WaveDropMobileMenuOpen";
-import { formatNumberWithCommas } from "@/helpers/Helpers";
+import WaveWinnersDropOutcome from "./header/WaveWinnersDropOutcome";
+import { WaveWinnersDropContent } from "./WaveWinnersDropContent";
 
 interface DefaultWaveWinnersDropProps {
   readonly winner: ApiWaveDecisionWinner;
@@ -88,7 +88,7 @@ export const DefaultWaveWinnersDrop: React.FC<DefaultWaveWinnersDropProps> = ({
             </div>
           )}
         </div>
-        <div className="tw-mt-3 tw-ml-[3.75rem]">
+        <div className="tw-mt-3 tw-ml-[3.5rem]">
           <div className="tw-flex tw-flex-col tw-gap-y-2">
             <div className="tw-flex tw-items-center tw-flex-wrap tw-gap-x-4 tw-gap-y-2">
               <div className="tw-flex tw-flex-whitespace-nowrap tw-gap-x-4 tw-items-center">
diff --git a/components/waves/winners/drops/header/WaveWinnersDropHeaderAuthorPfp.tsx b/components/waves/winners/drops/header/WaveWinnersDropHeaderAuthorPfp.tsx
index d210e4f1b3..97a968df77 100644
--- a/components/waves/winners/drops/header/WaveWinnersDropHeaderAuthorPfp.tsx
+++ b/components/waves/winners/drops/header/WaveWinnersDropHeaderAuthorPfp.tsx
@@ -9,7 +9,7 @@ export default function WaveWinnersDropHeaderAuthorPfp({
   winner,
 }: WaveWinnersDropHeaderAuthorPfpProps) {
   return (
-    <div className="tw-h-12 tw-w-12 tw-bg-iron-900 tw-relative tw-flex-shrink-0 tw-rounded-lg">
+    <div className="tw-h-11 tw-w-11 tw-bg-iron-900 tw-relative tw-flex-shrink-0 tw-rounded-lg">
       {winner.drop.author.pfp ? (
         <div className="tw-rounded-lg tw-h-full tw-w-full">
           <div className="tw-h-full tw-w-full tw-max-w-full tw-rounded-lg tw-overflow-hidden tw-bg-iron-900 tw-ring-1 tw-ring-white/10">