Add horizontal scrolling

src/pages/index.tsx

@@ -18,6 +18,7 @@ function Page({
 }: PageProps) {
   const [isLoading, setIsLoading] = useState(true);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [showAllOrgs, setShowAllOrgs] = useState(false);
 
   useEffect(() => {
     if (calendarData && Object.keys(calendarData).length > 0) {
@@ -77,23 +78,49 @@ function Page({
           />
         </div>
 
-        <div className="mb-16 mx-auto">
-          <div className="overflow-x-auto scrollbar-hide">
-            <div className="flex gap-6 px-4 py-2 min-w-max justify-center">
-              {filteredProviders.map((provider, index) => (
-                <OrganizationButton
-                  key={provider.fullName || provider.authors[0]}
-                  provider={provider}
-                  calendarData={calendarData}
-                  rank={index + 1}
-                />
-              ))}
+        <div className="mb-16 mx-auto max-w-full">
+          {/* Organization Buttons with Horizontal Scroll */}
+          <div className="relative px-4">
+            {/* Scrollable container with visible scrollbar */}
+            <div 
+              className="overflow-x-auto overflow-y-hidden pb-4 scrollbar-thin scrollbar-thumb-muted-foreground/30 scrollbar-track-transparent hover:scrollbar-thumb-muted-foreground/50"
+              style={{ 
+                scrollbarWidth: 'thin',
+                scrollbarColor: 'rgba(115, 115, 115, 0.3) transparent'
+              }}
+            >
+              <div className="flex gap-6 py-2 w-max mx-auto">
+                {(showAllOrgs ? filteredProviders : filteredProviders.slice(0, 10)).map((provider, index) => (
+                  <OrganizationButton
+                    key={provider.fullName || provider.authors[0]}
+                    provider={provider}
+                    calendarData={calendarData}
+                    rank={index + 1}
+                  />
+                ))}
+              </div>
             </div>
+            
+            {/* Visual scroll indicators */}
+            <div className="absolute left-0 top-0 bottom-4 w-8 bg-gradient-to-r from-background via-background/80 to-transparent pointer-events-none" />
+            <div className="absolute right-0 top-0 bottom-4 w-8 bg-gradient-to-l from-background via-background/80 to-transparent pointer-events-none" />
           </div>
+          
+          {/* Show More/Less Button */}
+          {filteredProviders.length > 10 && (
+            <div className="flex justify-center mt-4">
+              <button
+                onClick={() => setShowAllOrgs(!showAllOrgs)}
+                className="px-6 py-2 text-sm font-medium text-foreground bg-muted hover:bg-muted/80 rounded-full transition-colors duration-200 border border-border"
+              >
+                {showAllOrgs ? `Show Less (Top 10)` : `Show All ${filteredProviders.length} Organizations`}
+              </button>
+            </div>
+          )}
         </div>
              
         <HeatmapGrid 
-          sortedProviders={filteredProviders}
+          sortedProviders={showAllOrgs ? filteredProviders : filteredProviders.slice(0, 10)}
           calendarData={calendarData}
           isLoading={isLoading}
         />