fixed styling more

src/app/chunithm/page.tsx

@@ -4,14 +4,22 @@ import ScoreCardList from "@/components/PlayerScoreGrid";
 import PlayerBestTopScores from "@/components/PlayerTopBestScores";
 export default function Chunithm() {
   return (
-    <div className="min-h-screen bg-background ">
-      <NavigationBar />
-      <div className="p-4 ">
-        <PlayerBestTopScores />
+    <div className="min-h-screen bg-background flex flex-col">
+      <div className="flex justify-end">
+        <NavigationBar />
+      </div>
 
-        <div className="pt-2">
-          <CharacterCard />
-          <ScoreCardList />
+      <div className="flex flex-row">
+        <div className="flex flex-col justify-start items-start">
+          <div className="pl-4">
+            <PlayerBestTopScores />
+          </div>
+        </div>
+        <div className="flex flex-col justify-center items-center flex-grow">
+          <div>
+            <CharacterCard />
+            <ScoreCardList />
+          </div>
         </div>
       </div>
     </div>

src/components/PlayerScoreGrid.tsx

@@ -274,6 +274,7 @@ const ScoreCardList = () => {
         value={searchQuery}
         onChange={(e) => setSearchQuery(e.target.value)}
       />
+
       <div className="pt-4 grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 gap-4">
         {currentItems.map((scoreCardInfo, index) => (
           <div key={index} className="dark:bg-crust rounded-sm">

src/components/PlayerTopBestScores.tsx

@@ -79,9 +79,9 @@ const PlayerBestTopScores = () => {
     }
   }, [bestTop, recentRatingTable, selectedSegment]);
   return (
-    <div className="justify-center ">
+    <div className="hidden sm:hidden md:block justify-center mr-2 ">
       <div className="flex justify-start pb-2">
-        <div className="inline-flex rounded-md shadow-sm " role="group">
+        <div className="inline-flex rounded-md shadow-sm  " role="group">
           <Tabs defaultValue="top30">
             <TabsList>
               <TabsTrigger
@@ -115,7 +115,7 @@ const PlayerBestTopScores = () => {
         {loading && <div></div>}
         {error && <div>Error: {error}</div>}
         <div className=""></div>
-        <ScrollArea className="h-[950px] flex items-center justify-center rounded-md border">
+        <ScrollArea className="hidden sm:hidden md:block md:h-[950px] md:w-[300px]  items-center justify-center rounded-md border">
           <div className="p-4">
             <div className=" pb-2 text-typography ">
               {isAverageEnabled && selectedSegment === "Top30" && (