Make grids on extensions and tools page tighter

Author: UnsignedArduino

src/components/AwesomeArcadeList/Extension/extension.tsx

@@ -79,8 +79,6 @@ export function AwesomeArcadeExtensionGroup({
       {(() => {
         switch (layout) {
           case "masonry":
-          case "grid":
-          default:
             return (
               <div
                 id={`${title}ExtensionRow`}
@@ -113,6 +111,40 @@ export function AwesomeArcadeExtensionGroup({
                 })}
               </div>
             );
+          case "grid":
+          default:
+            return (
+              <div
+                id={`${title}ExtensionRow`}
+                className="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3"
+              >
+                {exts.map((ext, index) => {
+                  return (
+                    <motion.div
+                      className="col py-1"
+                      key={ext.repo}
+                      custom={index}
+                      variants={CARD_VARIANTS}
+                      initial="initial"
+                      animate="animate"
+                      whileHover="whileHover"
+                      whileTap="whileTap"
+                      transition={{
+                        type: "spring",
+                        stiffness: 260,
+                        damping: 20,
+                      }}
+                    >
+                      <AwesomeArcadeExtensionCard
+                        ext={ext}
+                        highlight={ext.repo === extToHighlight}
+                        pad={index < exts.length - 1 || true}
+                      />
+                    </motion.div>
+                  );
+                })}
+              </div>
+            );
           case "github":
             return exts.map((ext, index) => {
               return (

src/components/AwesomeArcadeList/Tool/tool.tsx

@@ -78,8 +78,6 @@ export function AwesomeArcadeToolGroup({
       {(() => {
         switch (layout) {
           case "masonry":
-          case "grid":
-          default:
             return (
               <div
                 id={`${title}ToolRow`}
@@ -112,6 +110,40 @@ export function AwesomeArcadeToolGroup({
                 })}
               </div>
             );
+          case "grid":
+          default:
+            return (
+              <div
+                id={`${title}ToolRow`}
+                className="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3"
+              >
+                {tools.map((tool, index) => {
+                  return (
+                    <motion.div
+                      className="col py-1"
+                      key={tool.repo}
+                      custom={index}
+                      variants={CARD_VARIANTS}
+                      initial="initial"
+                      animate="animate"
+                      whileHover="whileHover"
+                      whileTap="whileTap"
+                      transition={{
+                        type: "spring",
+                        stiffness: 260,
+                        damping: 20,
+                      }}
+                    >
+                      <AwesomeArcadeToolCard
+                        tool={tool}
+                        highlight={tool.repo === toolToHighlight}
+                        pad={index < tools.length - 1 || true}
+                      />
+                    </motion.div>
+                  );
+                })}
+              </div>
+            );
           case "github":
             return tools.map((tool, index) => {
               return (