Downloads button sizing

Signed-off-by: Joshua Castle <26531652+Kas-tle@users.noreply.github.com>

src/components/Grid.tsx

@@ -3,17 +3,32 @@ import React from 'react';
 interface GridProps {
     children: React.ReactNode;
     elementsPerRow: number;
+    minElementsPerRow?: number;
+    breakAt?: string;
     gap?: string;
 }
 
-export const Grid: React.FC<GridProps> = ({ children, elementsPerRow, gap }) => {
+export const Grid: React.FC<GridProps> = ({ children, elementsPerRow, minElementsPerRow, breakAt, gap }) => {
     const gridStyle = {
         display: 'grid',
         gridTemplateColumns: `repeat(${elementsPerRow}, 1fr)`,
         gap: gap || '0px'
     };
 
-    return <div className="grid" style={gridStyle}>{children}</div>;
+    const mediaQuery = `
+        @media (max-width: ${breakAt || '900px'}) {
+            .grid {
+                grid-template-columns: repeat(${minElementsPerRow || 1}, 1fr) !important;
+            }
+        }
+    `;
+
+    return (
+        <>
+            <style>{mediaQuery}</style>
+            <div className="grid" style={gridStyle}>{children}</div>
+        </>
+    );
 };
 
 interface GridItemProps {