Fix Galaxy Fold Pagination Overflow (resolves #384) (#385)

* fix: applied inline flex to tag fiter label span

* fix: added pagination styling for galazy screen

* fix: decreased pagination font size in mobile view

* fix: add different pagination line height for desktop view

* fix: made left and right margin value auto for desktop

src/scss/components/_pagination.scss

@@ -1,7 +1,9 @@
 .pagination {
 	display: block;
-	line-height: rem(32);
+	line-height: rem(38);
 	list-style: none;
+	margin-left: -10%;
+	margin-right: -10%;
 	margin-top: rem(27);
 	padding: 0;
 	text-align: center;
@@ -30,7 +32,7 @@
 		border-radius: 100%;
 		box-shadow: 0 0 0 rem(2) $blue-alt-light inset;
 		float: left;
-		font-size: rem(24);
+		font-size: rem(18);
 		font-weight: 400;
 		height: rem(45);
 		line-height: rem(45);
@@ -63,7 +65,7 @@
 
 		span {
 			color: $blue-alt;
-			font-size: rem(24);
+			font-size: rem(18);
 		}
 	}
 
@@ -126,6 +128,9 @@
 
 @include breakpoint-up(lg) {
 	.pagination {
+		line-height: rem(35);
+		margin-left: auto;
+		margin-right: auto;
 		margin-top: rem(62);
 
 		.previous,
@@ -135,6 +140,10 @@
 
 		.pagination-ellipsis {
 			margin: rem(4) rem(0);
+
+			span {
+				font-size: rem(24);
+			}
 		}
 
 		li.hide-on-mobile {
@@ -150,10 +159,23 @@
 		}
 
 		.pagination-link {
+			font-size: rem(24);
 			height: rem(53);
 			line-height: rem(53);
 			margin: 0 rem(13);
 			width: rem(53);
 		}
+
+		.pagination-next,
+		.pagination-previous {
+			line-height: rem(40);
+		}
+	}
+}
+
+// This media query breakpoint comes the width of the Galaxy Fold screen.
+@include breakpoint-down(xs) {
+	.pagination .pagination-link {
+		margin: rem(10) rem(3);
 	}
 }