From 95943864a191a02ddc5a2c2c09f97b4c9cf84139 Mon Sep 17 00:00:00 2001
From: Sahil Khan <sahilkhan123098p@gmail.com>
Date: Wed, 26 Mar 2025 15:07:58 +0530
Subject: [PATCH 1/3] Add useBreakpoint Hook (#328)

Signed-off-by: Sahil Khan <sahilkhan123098p@gmail.com>
---
 src/App.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2fda1e8d..fde4e2f9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { App as AntdApp, Layout, Row, Col, Collapse, Spin } from "antd";
+import { App as AntdApp, Layout, Row, Col, Collapse, Spin, Grid } from "antd";
 import { LoadingOutlined } from "@ant-design/icons";
 import { Routes, Route, useSearchParams, useNavigate } from "react-router-dom";
 import Navbar from "./components/Navbar";
@@ -98,6 +98,9 @@ const App = () => {
     }
   }, [searchParams]);
 
+  const { useBreakpoint } = Grid;
+  const screens = useBreakpoint();
+
   const panels = [
     {
       key: "templateMark",

From 19b793ef5cdf899054a99c637339e2e5f2dd8fec Mon Sep 17 00:00:00 2001
From: Sahil Khan <sahilkhan123098p@gmail.com>
Date: Wed, 26 Mar 2025 15:10:05 +0530
Subject: [PATCH 2/3] use screens for decreasing padding (#328)

Signed-off-by: Sahil Khan <sahilkhan123098p@gmail.com>
---
 src/App.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index fde4e2f9..944475fd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -143,8 +143,9 @@ const App = () => {
                 element={
                   <div
                     style={{
-                      padding: 24,
-                      paddingBottom: 150,
+                      padding: screens.md ? 24 : 0,
+                      paddingTop: screens.md ? 24 : 20,
+                      paddingBottom: screens.md ? 150 : 8,
                       minHeight: 360,
                       background: backgroundColor,
                     }}

From 6e0c956cafb83a5add6e5b3d8c97cfbe6c29ff17 Mon Sep 17 00:00:00 2001
From: Sahil Khan <sahilkhan123098p@gmail.com>
Date: Wed, 26 Mar 2025 15:12:19 +0530
Subject: [PATCH 3/3] use screens for updating padding for footer (#328)

Signed-off-by: Sahil Khan <sahilkhan123098p@gmail.com>
---
 src/components/Footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 1af1106f..52bce8e8 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -26,7 +26,7 @@ const CustomFooter: React.FC = () => {
       style={{
         background: "#1b2540",
         color: "white",
-        padding: "50px 50px 20px 50px",
+        padding: screens.md ? "50px 50px 20px 50px" : "30px 20px 20px 20px",
       }}
     >
       <Row justify="space-between" align="middle" gutter={[16, 16]}>