implement a janky fix for mobile until i can be bothered to make it mobile friendly

projects/website/src/components/ranking/ranking-data.tsx

@@ -11,19 +11,8 @@ import { PlayerRanking } from "@/components/ranking/player-ranking";
 const REFRESH_INTERVAL = 1000 * 60 * 5;
 
 type RankingDataProps = {
-  /**
-   * The page to show when opening the leaderboard.
-   */
   initialPage: number;
-
-  /**
-   * The country to show when opening the leaderboard.
-   */
   country?: string | undefined;
-
-  /**
-   * The leaderboard to display.
-   */
   initialPageData?: ScoreSaberPlayersPageToken;
 };
 
@@ -53,9 +42,6 @@ export default function RankingData({ initialPage, country, initialPageData }: R
     }
   }, [data, isLoading, isError]);
 
-  /**
-   * Gets the URL to the page.
-   */
   const getUrl = useCallback(
     (page: number) => {
       return `/ranking/${country != undefined ? `${country}/` : ""}${page}`;
@@ -63,10 +49,6 @@ export default function RankingData({ initialPage, country, initialPageData }: R
     [country]
   );
 
-  /**
-   * Handle updating the URL when the page number,
-   * sort, or search term changes.
-   */
   useEffect(() => {
     const newUrl = getUrl(currentPage);
     window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
@@ -80,6 +62,8 @@ export default function RankingData({ initialPage, country, initialPageData }: R
 
   return (
     <div className="flex flex-col gap-2">
+      {/* Wrapping the table in a scrollable container */}
+      <div className="overflow-x-auto">
         <table className="table w-full table-auto border-spacing-2 border-none text-left">
           <thead>
             <tr>
@@ -92,7 +76,7 @@ export default function RankingData({ initialPage, country, initialPageData }: R
               <th className="px-4 py-2 text-center">Weekly Change</th>
             </tr>
           </thead>
-        <tbody className="border-none overflow-x-scroll w-full">
+          <tbody className="border-none">
             {players.map(player => (
               <tr key={player.rank} className="border-b border-border">
                 <PlayerRanking isCountry={country != undefined} player={player} />
@@ -100,6 +84,7 @@ export default function RankingData({ initialPage, country, initialPageData }: R
             ))}
           </tbody>
         </table>
+      </div>
 
       {/* Pagination */}
       <Pagination