From 15c56431db84ff8f2a74c1175a02bf105c696778 Mon Sep 17 00:00:00 2001
From: Naman <naman.barkiya02@gmail.com>
Date: Mon, 29 Jan 2024 15:54:41 +0530
Subject: [PATCH 1/2] Improve docs/gallery card component

---
 website/src/components/GalleryPage.js | 39 +++++++++++++--------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/website/src/components/GalleryPage.js b/website/src/components/GalleryPage.js
index 312ebffdc514..28446f4a7ff7 100644
--- a/website/src/components/GalleryPage.js
+++ b/website/src/components/GalleryPage.js
@@ -1,9 +1,10 @@
 import React, { useEffect, useState, useCallback } from "react";
 import galleryData from "../data/gallery.json";
-import { Card, List, Select } from "antd";
+import { Card, List, Select, Typography } from "antd";
 import { useLocation, useHistory } from "react-router-dom";
 
 const { Option } = Select;
+const { Paragraph, Title } = Typography;
 
 const GalleryPage = () => {
   const location = useLocation();
@@ -75,10 +76,10 @@ const GalleryPage = () => {
           gutter: 16,
           xs: 1,
           sm: 2,
-          md: 3,
-          lg: 3,
-          xl: 4,
-          xxl: 4,
+          md: 2,
+          lg: 2,
+          xl: 3,
+          xxl: 3,
         }}
         dataSource={filteredData}
         renderItem={(item) => (
@@ -91,7 +92,8 @@ const GalleryPage = () => {
             >
               <Card
                 hoverable
-                bordered
+                bordered={false}
+                style={{ height: 370, paddingTop: 15 }}
                 cover={
                   <img
                     alt={item.title}
@@ -102,29 +104,26 @@ const GalleryPage = () => {
                           : `/autogen/img/gallery/${item.image}`
                         : `/autogen/img/gallery/default.png`
                     }
+                    style={{
+                      height: 150,
+                      width: "fit-content",
+                      margin: "auto",
+                    }}
                   />
                 }
               >
-                <div>
-                  <span
-                    style={{
-                      fontSize: "1.2rem",
-                      fontWeight: "bold",
-                      color: "black",
-                    }}
-                  >
-                    {item.title}
-                  </span>
-                </div>
-                <div
+                <Title level={5} ellipsis={{ rows: 2 }}>
+                  {item.title}
+                </Title>
+                <Paragraph
+                  ellipsis={{ rows: 3 }}
                   style={{
-                    // fontSize: "0.8rem",
                     fontWeight: "normal",
                     color: "#727272",
                   }}
                 >
                   {item.description ? item.description : item.title}
-                </div>
+                </Paragraph>
                 <TagsView tags={item.tags} />
               </Card>
             </a>

From e7d5a0b70e77f1c5fdd5323511bbc1fa598bfea6 Mon Sep 17 00:00:00 2001
From: Naman <naman.barkiya02@gmail.com>
Date: Tue, 30 Jan 2024 02:46:24 +0530
Subject: [PATCH 2/2] added border to gallery card component

---
 website/src/components/GalleryPage.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/src/components/GalleryPage.js b/website/src/components/GalleryPage.js
index 28446f4a7ff7..26b2bc7aa130 100644
--- a/website/src/components/GalleryPage.js
+++ b/website/src/components/GalleryPage.js
@@ -92,7 +92,7 @@ const GalleryPage = () => {
             >
               <Card
                 hoverable
-                bordered={false}
+                bordered
                 style={{ height: 370, paddingTop: 15 }}
                 cover={
                   <img
@@ -108,6 +108,7 @@ const GalleryPage = () => {
                       height: 150,
                       width: "fit-content",
                       margin: "auto",
+                      padding: 2,
                     }}
                   />
                 }