From b58d46168c405f5d7684e006a1385f5440207a7b Mon Sep 17 00:00:00 2001
From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com>
Date: Tue, 21 Feb 2023 16:41:45 +0530
Subject: [PATCH] feat: responsive pagination control  (#20665)

---
 .../components/formControls/PaginationControl.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/client/src/components/formControls/PaginationControl.tsx b/app/client/src/components/formControls/PaginationControl.tsx
index ae37901306..d471373a76 100644
--- a/app/client/src/components/formControls/PaginationControl.tsx
+++ b/app/client/src/components/formControls/PaginationControl.tsx
@@ -23,6 +23,12 @@ export const FormControlContainer = styled.div`
   margin-right: 1rem;
 `;
 
+const PaginationContainer = styled.div`
+  display: grid;
+  grid-gap: 8px 16px;
+  grid-template-columns: repeat(auto-fill, 280px);
+`;
+
 // using query dynamic input text for both so user can dynamically change these values.
 const valueFieldConfig: any = {
   key: "value",
@@ -82,12 +88,7 @@ export function Pagination(props: {
   };
 
   return (
-    <div
-      data-cy={name}
-      style={{
-        display: "flex",
-      }}
-    >
+    <PaginationContainer data-cy={name}>
       {/*  form control for Limit field */}
       <FormControlContainer>
         <FormControl
@@ -127,7 +128,7 @@ export function Pagination(props: {
           No. of rows to be skipped before querying
         </StyledFormLabel>
       </FormControlContainer>
-    </div>
+    </PaginationContainer>
   );
 }