make it more mobile friendly

src/pages/index.tsx

@@ -1,11 +1,14 @@
-"use client";
-
-import { Inter } from "next/font/google";
+import React, { useState, useEffect } from 'react';
 import ActivityCalendar from "react-activity-calendar";
-import { useState, useEffect } from "react";
-import { Tooltip as MuiTooltip } from '@mui/material';
+import { Tooltip } from '@mui/material';
 
-const inter = Inter({ subsets: ["latin"] });
+const PROVIDERS_MAP = {
+  "Mistral AI": { color: "#ff7000", authors: ["mistralai"] },
+  "Meta": { color: "#1877F2", authors: ["facebook", "meta-llama"] },
+  "OpenAI": { color: "#10A37F", authors: ["openai"] },
+  "Anthropic": { color: "#cc785c", authors: ["anthropic"] },
+  "Google": { color: "#DB4437", authors: ["google"] },
+};
 
 interface ModelData {
   createdAt: string;
@@ -18,18 +21,10 @@ interface Activity {
   level: number;
 }
 
-export default function Home() {
+export default function OpenSourceHeatmap() {
   const [calendarData, setCalendarData] = useState<Record<string, Activity[]>>({});
   const [isLoading, setIsLoading] = useState(true);
 
-  const PROVIDERS_MAP: Record<string, { color: string; authors: string[] }> = {
-    "Mistral AI": { color: "#ff7000", authors: ["mistralai"] },
-    "Meta": { color: "#1877F2", authors: ["facebook", "meta-llama"] },
-    "OpenAI": { color: "#10A37F", authors: ["openai"] },
-    "Anthropic": { color: "#cc785c", authors: ["anthropic"] },
-    "Google": { color: "#DB4437", authors: ["google"] },
-  }
-
   const generateCalendarData = (modelData: ModelData[]) => {
     const data: Record<string, Activity[]> = Object.fromEntries(
       Object.keys(PROVIDERS_MAP).map(provider => [provider, []])
@@ -38,9 +33,8 @@ export default function Home() {
     const today = new Date();
     const startDate = new Date(today);
     startDate.setMonth(today.getMonth() - 11);
-    startDate.setDate(1); // start from the first day of the month
+    startDate.setDate(1);
 
-    // generate daily data for each provider
     for (let d = new Date(startDate); d <= today; d.setDate(d.getDate() + 1)) {
       const dateString = d.toISOString().split('T')[0];
       
@@ -108,43 +102,46 @@ export default function Home() {
   }, []);
 
   return (
-    <main className={`flex flex-col items-center justify-center min-h-screen mx-auto p-24 ${inter.className}`}>
-      <h1 className="text-5xl font-bold text-center">Open Source Heatmap</h1>
-      <p className="text-center mt-2 text-sm">A heatmap for open source model releases.</p>
-      <div className="mt-16">
-        {isLoading ? (
-          <p>Loading...</p>
-        ) : (
-          <>
-            {Object.entries(PROVIDERS_MAP)
-              .sort(([keyA], [keyB]) => 
-                calendarData[keyB].reduce((sum, day) => sum + day.count, 0) -
-                calendarData[keyA].reduce((sum, day) => sum + day.count, 0)
-              )
-              .map(([providerName, { color }]) => (
-                <div key={providerName} className="mb-8">
-                  <h2 className="text-2xl font-bold mb-2">{providerName}</h2>
-                  <ActivityCalendar 
-                    data={calendarData[providerName]}
-                    theme={{
-                      dark: ['#161b22', color],
-                      light: ['#e0e0e0', color],
-                    }}
-                    hideTotalCount
-                    renderBlock={(block, activity) => (
-                      <MuiTooltip
-                        title={`${activity.count} models created on ${activity.date}`}
-                      >
-                        {block}
-                      </MuiTooltip>
-                    )}
-                  />
+    <div className="w-full max-w-screen-lg mx-auto p-4">
+      <h1 className="text-3xl lg:text-5xl mt-16 font-bold text-center mb-2">Open Source Heatmap</h1>
+      <p className="text-center text-sm mb-8">A heatmap for open source model releases.</p>
+      {isLoading ? (
+        <p className="text-center">Loading...</p>
+      ) : (
+        <div className="space-y-8 mx-10">
+          {Object.entries(PROVIDERS_MAP)
+            .sort(([keyA], [keyB]) => 
+              calendarData[keyB].reduce((sum, day) => sum + day.count, 0) -
+              calendarData[keyA].reduce((sum, day) => sum + day.count, 0)
+            )
+            .map(([providerName, { color }]) => (
+              <div key={providerName} className="flex flex-col">
+                <h2 className="text-xl font-bold mb-2">{providerName}</h2>
+                <div className="w-full overflow-x-auto">
+                  <div className="inline-block mx-auto">
+                    <ActivityCalendar 
+                      data={calendarData[providerName]}
+                      theme={{
+                        dark: ['#161b22', color],
+                        light: ['#e0e0e0', color],
+                      }}
+                      hideTotalCount
+                      renderBlock={(block, activity) => (
+                        <Tooltip
+                          title={`${activity.count} models created on ${activity.date}`}
+                          arrow
+                        >
+                          {block}
+                        </Tooltip>
+                      )}
+                    />
+                  </div>
                 </div>
-              ))
-            }
-          </>
-        )}
-      </div>
-    </main>
+              </div>
+            ))
+          }
+        </div>
+      )}
+    </div>
   );
 }