fix pagination centering (#758)

Author: mmolis1

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "11.2.1",
+  "version": "11.2.2",
   "license": "MIT",
   "repository": {
     "type": "git",

package.json

@@ -16,6 +16,7 @@ function Pagination({
   set,
   size,
   firstPage = 0,
+  small,
 }: IExtendedPaginationProps) {
   const currentPage = Math.ceil(from / size);
   const nPages = Math.ceil(count / size);
@@ -60,10 +61,9 @@ function Pagination({
 
   return (
     <nav
-      className="pagination"
+      className={`pagination ${!small ? "center-absolutely" : ""}`}
       role="navigation"
       aria-label="pagination"
-      style={{ transform: "translate(-50%, 0)" }}
     >
       <ul className="pagination-list">
         <When condition={currentPage > firstPage}>
@@ -172,6 +172,7 @@ export function ExtendedPaginationBox({
         />
       )}
       <Pagination
+        small={small}
         from={from}
         set={setPage}
         size={size}

src/components/extendedPagination/ExtendedPagination.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import theme from "../../theme";
+import theme, { bp } from "../../theme";
 
 type Props = {
   sidebar?: boolean;
@@ -8,6 +8,7 @@ type Props = {
 
 export const StyledPaginationBox = styled.nav<Props>`
   display: flex;
+  position: relative;
   flex-wrap: wrap;
   flex: ${({ sidebar }) => (sidebar ? 1 : 0)};
   background-color: ${theme.color.background.ui03};
@@ -43,6 +44,14 @@ export const StyledPaginationBox = styled.nav<Props>`
     margin: 0;
   }
 
+  ${bp("lg")`
+    .center-absolutely {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, 0);
+    }
+  `}
+
   button {
     display: flex;
     align-items: center;

src/components/paginationHelpers/PaginationBox.tsx

@@ -19,4 +19,5 @@ export type IPaginationProps = {
 
 export type IExtendedPaginationProps = Omit<IPaginationProps, "current"> & {
   from: number;
+  small?: boolean;
 };