change up map buttons to be more mobile friendly and fix time ago formatter eslint stuff

src/common/time-utils.ts

@@ -4,12 +4,12 @@
  * @param input Date | number (timestamp)
  * @returns the format of the time ago
  */
-export function timeAgo(input: number) {
+export function timeAgo(input: Date) {
   const inputDate = new Date(input).getTime(); // Convert input to a Date object if it's not already
   const now = new Date().getTime();
   const deltaSeconds = Math.floor((now - inputDate) / 1000); // Get time difference in seconds
 
-  if (deltaSeconds < 60) {
+  if (deltaSeconds <= 60) {
     return "just now";
   }
 
@@ -21,10 +21,10 @@ export function timeAgo(input: number) {
     { unit: "m", seconds: 60 }, // minutes
   ];
 
-  let result = [];
+  const result = [];
   let remainingSeconds = deltaSeconds;
 
-  for (let { unit, seconds } of timeUnits) {
+  for (const { unit, seconds } of timeUnits) {
     const count = Math.floor(remainingSeconds / seconds);
     if (count > 0) {
       result.push(`${count}${unit}`);

src/components/fallback-link.tsx

@@ -14,7 +14,7 @@ type Props = {
 
 export default function FallbackLink({ href, children }: Props) {
   return href ? (
-    <NextLink href={href} target="_blank">
+    <NextLink href={href} target="_blank" className="w-fit">
       {children}
     </NextLink>
   ) : (

src/components/leaderboard/leaderboard-score.tsx

@@ -24,7 +24,7 @@ type Props = {
 
 export default function LeaderboardScore({ player, score, leaderboard }: Props) {
   return (
-    <div className="pb-1 pt-1">
+    <div className="pb-1.5 pt-1.5">
       <div className="grid items-center w-full gap-2 grid-cols-[20px 1fr_1fr] lg:grid-cols-[130px_4fr_300px]">
         <ScoreRankInfo score={score} />
         <LeaderboardPlayer player={player} score={score} />

src/components/score/score-buttons.tsx

@@ -28,12 +28,8 @@ export default function ScoreButtons({
   const { toast } = useToast();
 
   return (
-    <div className="flex justify-end">
+    <div className="flex justify-end gap-2">
-      <LeaderboardButton
+      <div className="flex flex-row items-center lg:items-start justify-center flex-wrap gap-1 lg:justify-end">
-        isLeaderboardExpanded={isLeaderboardExpanded}
-        setIsLeaderboardExpanded={setIsLeaderboardExpanded}
-      />
-      <div className="flex flex-row justify-center flex-wrap gap-1 lg:justify-end">
         {beatSaverMap != undefined && (
           <>
             {/* Copy BSR */}
@@ -75,6 +71,10 @@ export default function ScoreButtons({
           <YouTubeLogo />
         </ScoreButton>
       </div>
+      <LeaderboardButton
+        isLeaderboardExpanded={isLeaderboardExpanded}
+        setIsLeaderboardExpanded={setIsLeaderboardExpanded}
+      />
     </div>
   );
 }

src/components/score/score-info.tsx

@@ -68,7 +68,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
           </p>
           <p className="text-sm text-gray-400">{leaderboard.songAuthorName}</p>
           <FallbackLink href={mappersProfile}>
-            <p className={clsx("text-sm", mappersProfile && "hover:brightness-75 transform-gpu transition-all")}>
+            <p className={clsx("text-sm", mappersProfile && "hover:brightness-75 transform-gpu transition-all w-fit")}>
               {leaderboard.levelAuthorName}
             </p>
           </FallbackLink>