From 9f63fc64a64e48eb33a270d89ca4c8e3fcea7621 Mon Sep 17 00:00:00 2001
From: Joshua Castle <26531652+Kas-tle@users.noreply.github.com>
Date: Sun, 25 Feb 2024 01:11:16 -0800
Subject: [PATCH] Downloads button sizing

Signed-off-by: Joshua Castle <26531652+Kas-tle@users.noreply.github.com>
---
 src/components/Grid.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index 72021aa..fc4e088 100644
--- a/src/components/Grid.tsx
+++ b/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 {