From 1a2ceede8633482ea939c8c1ba1f10d6f6c1dc83 Mon Sep 17 00:00:00 2001
From: Artem_Blazhko <artem_blazhko@epam.com>
Date: Tue, 28 Oct 2025 19:17:45 +0200
Subject: [PATCH] Change pagination styling according to new requirements from
 designer

---
 src/components/pagination/pagination.module.scss | 5 +++++
 src/components/pagination/pagination.tsx         | 5 +++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/pagination/pagination.module.scss b/src/components/pagination/pagination.module.scss
index 2b6aa6cb..453b7188 100644
--- a/src/components/pagination/pagination.module.scss
+++ b/src/components/pagination/pagination.module.scss
@@ -13,3 +13,8 @@
   @include font-scale();
   color: var(--rp-ui-base-almost-black);
 }
+
+.pagination_with_controls {
+  justify-content: center;
+  gap: 24px;
+}
diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
index b0ed46ef..891d8b2d 100644
--- a/src/components/pagination/pagination.tsx
+++ b/src/components/pagination/pagination.tsx
@@ -40,9 +40,10 @@ export const Pagination: FC<PaginationProps> = ({
 }): ReactElement => {
   const ofText = captions?.of || 'of';
   const pageText = captions?.page || 'Page';
+  const isMoreThanOnePages = totalPages > 1;
 
   return (
-    <div className={cx('pagination')}>
+    <div className={cx('pagination', isMoreThanOnePages ? 'pagination_with_controls' : '')}>
       <ItemCounter
         activePage={activePage}
         pageSize={pageSize}
@@ -50,7 +51,7 @@ export const Pagination: FC<PaginationProps> = ({
         ofText={ofText}
         itemsText={captions?.items || 'items'}
       />
-      {totalPages > 1 && (
+      {isMoreThanOnePages && (
         <PageControls
           activePage={activePage}
           totalPages={totalPages}