# code-snippets/3.10.0-beta.1/css/common/list-table/_pagination.scss

Code Snippets, version 3.10.0-beta.1. 100 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.10.0-beta.1/code/css/common/list-table/_pagination.scss
- Raw: https://pluginprobe.com/plugins/code-snippets/3.10.0-beta.1/raw/css/common/list-table/_pagination.scss
- Modified: 2026-08-04T13:35:40+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/3.10.0-beta.1/code/css/common/list-table/_pagination.scss#L10-L20`.

```scss
@use '../checkbox';

// The pagination group and view toggle wrap together as one end-pinned
// cluster so narrow viewports never split them across rows.
.tablenav .tablenav-end-group {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-inline-start: auto;
}

.tablenav .tablenav-pages-nav {
	display: flex;
	align-items: center;
	gap: 8px;

	.tablenav-pages {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
	}
}

// "Select all" control shown in the toolbar beside the bulk actions.
.tablenav .tablenav-select-all {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;

	input[type='checkbox'] {
		@include checkbox.canonical;
	}
}

.snippets-search-area {
	display: flex;
	align-items: center;
	gap: 12px;

	search {
		flex: 1 1 auto;
		min-inline-size: 0;
	}

	.search-box {
		float: none;
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;

		input[type='search'] {
			flex: 1 1 auto;
			min-inline-size: 0;
		}
	}
}

// Inside the results toolbar the search area is fixed to the design width,
// with the input flexing to fill the available space.
.tablenav .snippets-search-area {
	inline-size: 237px;
}

.wrap .snippets-search-area input[type='search'] {
	border-color: #e3e3e4;
}

// Tablet widths: let the search area grow to fill the remainder of its row
// while the fixed-width selects keep their sizing and groups wrap naturally.
@media (width <= 1024px) {
	.tablenav .snippets-search-area {
		inline-size: auto;
		flex: 1 1 237px;
		max-inline-size: 100%;
	}
}

@media (width <= 782px) {
	p.search-box {
		float: inline-start;
		position: initial;
		margin-block: 1em 0;
		margin-inline: 0;
		block-size: auto;
	}

	// Mobile: the search area takes a full row of its own, and the action
	// groups stay visible (core admin hides .tablenav.top .actions here).
	.tablenav .snippets-search-area {
		flex-basis: 100%;
	}

	.tablenav .alignleft.actions {
		display: flex;
	}
}

```