Adapt the dimensions of .button.small for the pagination links on mobile

dtdesign · dtdesign · commit c633b33add5b · 2025-11-21T20:35:29.000+01:00
diff --git a/wcfsetup/install/files/style/ui/pagination.scss b/wcfsetup/install/files/style/ui/pagination.scss
@@ -18,14 +18,15 @@
 }
 
 .pagination__link {
+	--padding-vertical: 4px;
 	--padding-side: 8px;
 
 	border-radius: 4px;
 	color: var(--wcfContentText);
 	display: inline-block;
 	font-variant: tabular-nums;
 	min-width: calc(2ch + 2 * var(--padding-side));
-	padding: 4px var(--padding-side);
+	padding: var(--padding-vertical) var(--padding-side);
 	text-align: center;
 }
 
@@ -39,4 +40,10 @@ body:not(.touch) .pagination__link:hover {
 	.pagination__wrapper {
 		text-align: center;
 	}
+
+	.pagination__link {
+		--padding-vertical: 8px;
+
+		@include wcfFontSmall;
+	}
 }

Original file line number	Diff line number	Diff line change
`@@ -18,14 +18,15 @@`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`.pagination__link {`
	`21`	`+ --padding-vertical: 4px;`
`21`	`22`	`--padding-side: 8px;`
`22`	`23`
`23`	`24`	`border-radius: 4px;`
`24`	`25`	`color: var(--wcfContentText);`
`25`	`26`	`display: inline-block;`
`26`	`27`	`font-variant: tabular-nums;`
`27`	`28`	`min-width: calc(2ch + 2 * var(--padding-side));`
`28`		`- padding: 4px var(--padding-side);`
	`29`	`+ padding: var(--padding-vertical) var(--padding-side);`
`29`	`30`	`text-align: center;`
`30`	`31`	`}`
`31`	`32`
`@@ -39,4 +40,10 @@ body:not(.touch) .pagination__link:hover {`
`39`	`40`	`.pagination__wrapper {`
`40`	`41`	`text-align: center;`
`41`	`42`	`}`
	`43`	`+`
	`44`	`+ .pagination__link {`
	`45`	`+ --padding-vertical: 8px;`
	`46`	`+`
	`47`	`+ @include wcfFontSmall;`
	`48`	`+ }`
`42`	`49`	`}`