// Tab-specific overrides on top of the page-level admin-page-layout
// invocation that lives in `src/dashboard/admin-shell.scss` (enqueued as
// a separate stylesheet by class-admin-ui.php, so every route gets the
// scrollable chrome regardless of whether it uses DashboardLayout).
body.jetpack_page_jetpack-videopress {

	// Propagate the admin page's flex column through @wordpress/ui's Tabs
	// primitives, which default to display:block and break the chain. Lets
	// DataViews-based tabs (Library) flex-grow into the available area and
	// pin their pagination to the visible bottom. Scoped to the dashboard
	// Tabs.Root via a stable class so we don't reach into nested tabpanels
	// inside individual routes (e.g. the Overview screen's KPI tablist /
	// chart tabpanel).
	.vp-dashboard-tabs {
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		min-height: 0;

		> [role="tabpanel"] {
			display: flex;
			flex-direction: column;
			flex: 1 1 0;
			min-height: 0;
		}
	}

	// Match the design-system default-variant Tabs (Storybook reference).
	// We pair `<Tabs.List>` (no variant) with the canonical 16px per-tab inline
	// padding — `admin-page-layout` would otherwise bump it to 24px to line the
	// first tab up with the page-title edge. To keep that alignment, offset the
	// tablist itself by the missing 8px so the first tab's text still starts at
	// the page-header inline padding (8px tablist + 16px tab = 24px). The
	// hairline lives on `.jp-admin-page-tabs` and still spans the full width.
	.jp-admin-page-tabs {

		[role="tablist"] {
			padding-inline-start: 8px;
		}

		[role="tab"] {
			padding-inline: var(--wpds-dimension-padding-lg);
		}
	}
}
