From dc275b8ff6fea154056774c659810ba4115415c9 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 20:17:48 +0300
Subject: [PATCH 1/7] feat: adapt snippets shell for mobile

---
 src/css/common/_page-header.scss              | 17 ++++++
 src/css/common/_subnav.scss                   | 30 +++++++++-
 src/css/common/_theme.scss                    |  2 +
 src/css/common/_toolbar.scss                  | 59 ++++++++++++++++++-
 .../SnippetsTable/SnippetsTable.tsx           | 35 ++++++-----
 src/js/components/common/Toolbar.tsx          |  5 +-
 tests/e2e/code-snippets-mobile.spec.ts        | 43 ++++++++++++++
 7 files changed, 171 insertions(+), 20 deletions(-)
 create mode 100644 tests/e2e/code-snippets-mobile.spec.ts

diff --git a/src/css/common/_page-header.scss b/src/css/common/_page-header.scss
index 81a8c10e0..d25a0ae71 100644
--- a/src/css/common/_page-header.scss
+++ b/src/css/common/_page-header.scss
@@ -43,3 +43,20 @@
 		text-decoration: underline;
 	}
 }
+
+@media (width <= 480px) {
+	.snippets-page-header {
+		align-items: flex-start;
+		flex-direction: column;
+		gap: 16px;
+		margin-block: 17px 24px;
+		margin-inline: 8px;
+
+		h1,
+		h2 {
+			font-size: 28px;
+			font-weight: 590;
+			letter-spacing: -0.56px;
+		}
+	}
+}
diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index 4b5ecf5fa..78842b8e9 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -11,7 +11,7 @@
 
 	// The toolbar band above already draws the 1px separator, so only a
 	// bottom border here — a top border would double the line weight.
-	border-block-end: 1px solid #e2e2e4;
+	border-block-end: 1px solid theme.$border-light;
 	min-block-size: 53px;
 
 	// Bleed across the full admin content width, flush against the plugin
@@ -88,7 +88,7 @@
 		color: #646970;
 		text-decoration: none;
 		box-sizing: border-box;
-		border-inline-end: 1px solid #e2e2e4;
+		border-inline-end: 1px solid theme.$border-light;
 
 		// The text-only "All Snippets" tab uses a slightly wider gap between
 		// its label and count than tabs that lead with a badge or icon.
@@ -138,6 +138,14 @@
 
 }
 
+.snippet-type-nav-container {
+	position: relative;
+}
+
+.snippet-type-nav-fade {
+	display: none;
+}
+
 // Card/table view toggle: a two-icon segmented pair of square tiles with
 // the active view filled in the accent colour.
 .snippet-view-toggle {
@@ -240,3 +248,21 @@
 	margin-block-start: 20px;
 	border-block-start: 1px solid theme.$control-border;
 }
+
+@media (width <= 480px) {
+	.snippet-type-nav-fade {
+		display: block;
+		position: absolute;
+		z-index: 1;
+		inset-block-start: -10px;
+		inset-inline-end: -12px;
+		inline-size: 66px;
+		block-size: 52px;
+		background: linear-gradient(90deg, rgb(255 255 255 / 0%), #fff);
+		pointer-events: none;
+	}
+
+	.snippets-screen-meta-slot {
+		display: none;
+	}
+}
diff --git a/src/css/common/_theme.scss b/src/css/common/_theme.scss
index a836dce51..3c266010e 100644
--- a/src/css/common/_theme.scss
+++ b/src/css/common/_theme.scss
@@ -12,6 +12,8 @@ $cloud-update: #ff9800;
 // Plugin admin control tokens, applied to native form controls on all plugin
 // screens regardless of WordPress version (see common/_wp-admin.scss).
 $accent-hover: #0a4b78;
+$background-light: #f7f7f8;
+$border-light: #e2e2e4;
 $control-border: #c3c4c7;
 $control-text: #2c3338;
 $control-height: 38px;
diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 2fe2b16d2..935e88953 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -66,7 +66,7 @@ $wpcontent-inline-start-indent: 20px;
 }
 
 .code-snippets-toolbar-lower {
-	border-block-end: 1px solid #e2e2e4;
+	border-block-end: 1px solid theme.$border-light;
 	block-size: 60px;
 	box-sizing: border-box;
 
@@ -201,3 +201,60 @@ $wpcontent-inline-start-indent: 20px;
 .code-snippets-return-link {
 	float: inline-end;
 }
+
+@media (width <= 480px) {
+	#wpbody {
+		padding-block-start: 143px;
+	}
+
+	.code-snippets-toolbar {
+		block-size: 143px;
+	}
+
+	.code-snippets-toolbar-upper nav {
+		display: none;
+	}
+
+	.code-snippets-toolbar-lower {
+		block-size: 67px;
+
+		nav {
+			overflow-x: auto;
+			scrollbar-width: none;
+
+			&::-webkit-scrollbar {
+				display: none;
+			}
+		}
+
+		ul {
+			min-inline-size: 100%;
+		}
+
+		li {
+			flex: 1 0 92px;
+		}
+
+		li a {
+			inline-size: 100%;
+			padding-block: 8px;
+			padding-inline: 12px;
+			gap: 4px;
+			border-block-end: 3px solid transparent;
+			font-size: 14px;
+			font-weight: 700;
+
+			&.active-link {
+				border-block-end-color: theme.$accent;
+			}
+		}
+
+		li:not(.toolbar-end-item) + li.toolbar-end-item {
+			margin-inline-start: 0;
+		}
+
+		.cloud-library-item {
+			display: none;
+		}
+	}
+}
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index e129d949b..dd80f92f5 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -123,24 +123,27 @@ const SnippetsTableInner = () => {
 
 	return (
 		<>
-			<nav
-				className="snippet-type-nav"
-				aria-label={__('Snippet types', 'code-snippets')}
-			>
-				<ul>
-					<SnippetTypeTab
-						count={getCount()}
-						setIsUpgradeDialogOpen={setIsUpgradeDialogOpen}
-					/>
-					{SNIPPET_TYPES.map(type =>
+			<div className="snippet-type-nav-container">
+				<nav
+					className="snippet-type-nav"
+					aria-label={__('Snippet types', 'code-snippets')}
+				>
+					<ul>
 						<SnippetTypeTab
-							key={type}
-							type={type}
-							count={getCount(type)}
+							count={getCount()}
 							setIsUpgradeDialogOpen={setIsUpgradeDialogOpen}
-						/>)}
-				</ul>
-			</nav>
+						/>
+						{SNIPPET_TYPES.map(type =>
+							<SnippetTypeTab
+								key={type}
+								type={type}
+								count={getCount(type)}
+								setIsUpgradeDialogOpen={setIsUpgradeDialogOpen}
+							/>)}
+					</ul>
+				</nav>
+				<span className="snippet-type-nav-fade" aria-hidden="true" />
+			</div>
 
 			<ScreenMetaSlot />
 
diff --git a/src/js/components/common/Toolbar.tsx b/src/js/components/common/Toolbar.tsx
index eac1b4c61..4e528f1ce 100644
--- a/src/js/components/common/Toolbar.tsx
+++ b/src/js/components/common/Toolbar.tsx
@@ -145,7 +145,10 @@ const LowerNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 		<nav aria-label={__('Main features', 'code-snippets')}>
 			<ul>
 				{LOWER_NAV_LINKS.map(link =>
-					<li key={link.name} className={link.end ? 'toolbar-end-item' : undefined}>
+					<li
+						key={link.name}
+						className={classnames(`${link.name}-item`, { 'toolbar-end-item': link.end })}
+					>
 						<a
 							href={link.url ?? buildUrl(window.CODE_SNIPPETS?.urls.manage, { subpage: link.name })}
 							className={classnames(`${link.name}-link`, { 'active-link': isActiveLink(link) })}
diff --git a/tests/e2e/code-snippets-mobile.spec.ts b/tests/e2e/code-snippets-mobile.spec.ts
new file mode 100644
index 000000000..cabd92201
--- /dev/null
+++ b/tests/e2e/code-snippets-mobile.spec.ts
@@ -0,0 +1,43 @@
+import { expect, test } from '@playwright/test'
+import { SnippetsTestHelper } from './helpers/SnippetsTestHelper'
+
+const MOBILE_VIEWPORT = { width: 440, height: 1000 }
+
+test.describe('Mobile snippets views', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.setViewportSize(MOBILE_VIEWPORT)
+		await new SnippetsTestHelper(page).navigateToSnippetsAdmin()
+	})
+
+	test('Uses the mobile shell at the canonical breakpoint', async ({ page }) => {
+		const upperToolbar = page.locator('.code-snippets-toolbar-upper')
+		const primaryToolbar = page.locator('.code-snippets-toolbar-lower')
+		const activeNavLink = primaryToolbar.locator('.active-link')
+		const typeNav = page.locator('.snippet-type-nav')
+		const pageHeader = page.locator('.snippets-page-header')
+		const title = pageHeader.getByRole('heading')
+		const createButton = pageHeader.getByRole('link', { name: 'Create new Snippet' })
+
+		await expect(upperToolbar.locator('nav')).toBeHidden()
+		await expect(primaryToolbar.locator('.cloud-library-link')).toBeHidden()
+		await expect(primaryToolbar).toHaveCSS('height', '67px')
+		await expect(activeNavLink).toHaveCSS('flex-direction', 'column')
+		await expect(activeNavLink).toHaveCSS('border-bottom-width', '3px')
+		await expect(page.locator('.snippet-type-nav-fade')).toBeVisible()
+		await expect(page.locator('.snippets-screen-meta-slot')).toBeHidden()
+		await expect(title).toHaveCSS('font-size', '28px')
+
+		const typeNavOverflows = await typeNav.evaluate(
+			element => element.scrollWidth > element.clientWidth
+		)
+		expect(typeNavOverflows).toBe(true)
+
+		const titleBox = await title.boundingBox()
+		const createButtonBox = await createButton.boundingBox()
+		const pageHeaderBox = await pageHeader.boundingBox()
+		expect(titleBox).not.toBeNull()
+		expect(createButtonBox).not.toBeNull()
+		expect(pageHeaderBox?.x).toBeCloseTo(18, 0)
+		expect(createButtonBox?.y).toBeGreaterThan((titleBox?.y ?? 0) + (titleBox?.height ?? 0))
+	})
+})

From 60202a5880027ca86b5ff77b171c88cff5001b9a Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 20:33:18 +0300
Subject: [PATCH 2/7] feat: adapt snippet cards for mobile

---
 src/css/common/_cards.scss             |  2 +-
 src/css/common/_modal.scss             | 24 ++++++++++--
 src/css/manage.scss                    |  1 +
 src/css/manage/_mobile-cards.scss      | 20 ++++++++++
 src/css/manage/_snippets-table.scss    |  3 +-
 tests/e2e/code-snippets-mobile.spec.ts | 52 +++++++++++++++++++++++++-
 6 files changed, 95 insertions(+), 7 deletions(-)
 create mode 100644 src/css/manage/_mobile-cards.scss

diff --git a/src/css/common/_cards.scss b/src/css/common/_cards.scss
index 57efd0ba1..cd816bdce 100644
--- a/src/css/common/_cards.scss
+++ b/src/css/common/_cards.scss
@@ -30,7 +30,7 @@
 		align-items: center;
 		justify-content: space-between;
 		gap: 8px;
-		background: #f7f7f8;
+		background: theme.$background-light;
 		margin-block-start: auto;
 		border-block-start: 1px solid theme.$control-border;
 		padding-inline: 24px;
diff --git a/src/css/common/_modal.scss b/src/css/common/_modal.scss
index 3a90d67f8..07aac5aab 100644
--- a/src/css/common/_modal.scss
+++ b/src/css/common/_modal.scss
@@ -53,13 +53,31 @@
 }
 
 .components-modal__frame.code-snippets-preview-modal {
-	min-inline-size: 520px;
+	min-inline-size: min(520px, 90vw);
 	min-block-size: 240px;
 	inline-size: min(900px, 90vw);
 	max-block-size: 85vh;
 
-	@media (width <= 600px) {
-		min-inline-size: 90vw;
+	@media (width <= 480px) {
+		min-inline-size: 0;
+		min-block-size: 0;
+		inline-size: calc(100vw - 36px);
+		block-size: calc(100vh - 36px);
+		max-inline-size: calc(100vw - 36px);
+		max-block-size: calc(100vh - 36px);
+		margin: auto;
+
+		.components-modal__header-heading-container {
+			min-inline-size: 0;
+			box-sizing: border-box;
+			padding-inline-end: 64px;
+		}
+
+		.components-modal__header-heading {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
 	}
 
 	.components-modal__header {
diff --git a/src/css/manage.scss b/src/css/manage.scss
index 79c481287..2fe19de9e 100644
--- a/src/css/manage.scss
+++ b/src/css/manage.scss
@@ -15,6 +15,7 @@
 @use 'manage/snippets-table';
 @use 'manage/cloud-community';
 @use 'manage/cloud-community-cards';
+@use 'manage/mobile-cards';
 
 .tablenav .tablenav-pages {
 	margin-block-end: 0;
diff --git a/src/css/manage/_mobile-cards.scss b/src/css/manage/_mobile-cards.scss
new file mode 100644
index 000000000..d2c63325e
--- /dev/null
+++ b/src/css/manage/_mobile-cards.scss
@@ -0,0 +1,20 @@
+@media (width <= 480px) {
+	.snippets-card-grid-container {
+		margin-inline: 8px 6px;
+	}
+
+	.snippets-card-grid {
+		.snippet-card-corner {
+			display: none;
+		}
+
+		.snippet-card-header {
+			padding-inline-end: 0;
+
+			h3 {
+				font-size: 16px;
+				font-weight: 590;
+			}
+		}
+	}
+}
diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index 615597f7a..c77296442 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -77,8 +77,9 @@
 			grid-template-columns: repeat(2, minmax(0, 1fr));
 		}
 
-		@media (width <= 782px) {
+		@media (width <= 480px) {
 			grid-template-columns: minmax(0, 1fr);
+			gap: 16px;
 		}
 	}
 
diff --git a/tests/e2e/code-snippets-mobile.spec.ts b/tests/e2e/code-snippets-mobile.spec.ts
index cabd92201..0b278719b 100644
--- a/tests/e2e/code-snippets-mobile.spec.ts
+++ b/tests/e2e/code-snippets-mobile.spec.ts
@@ -1,12 +1,25 @@
 import { expect, test } from '@playwright/test'
-import { SnippetsTestHelper } from './helpers/SnippetsTestHelper'
+import { URLS } from './helpers/constants'
+import type { Page } from '@playwright/test'
 
 const MOBILE_VIEWPORT = { width: 440, height: 1000 }
 
+const switchSnippetView = async (page: Page, view: 'Card view' | 'Table view') => {
+	const saved = page
+		.waitForResponse(response =>
+			response.url().includes('/snippet-view') && 'GET' !== response.request().method()
+		)
+		.catch(() => undefined)
+
+	await page.getByRole('button', { name: view }).click()
+	await saved
+}
+
 test.describe('Mobile snippets views', () => {
 	test.beforeEach(async ({ page }) => {
 		await page.setViewportSize(MOBILE_VIEWPORT)
-		await new SnippetsTestHelper(page).navigateToSnippetsAdmin()
+		await page.goto(URLS.SNIPPETS_ADMIN)
+		await expect(page.locator('.snippets-list-view')).toBeVisible()
 	})
 
 	test('Uses the mobile shell at the canonical breakpoint', async ({ page }) => {
@@ -40,4 +53,39 @@ test.describe('Mobile snippets views', () => {
 		expect(pageHeaderBox?.x).toBeCloseTo(18, 0)
 		expect(createButtonBox?.y).toBeGreaterThan((titleBox?.y ?? 0) + (titleBox?.height ?? 0))
 	})
+
+	test('Stacks snippet cards and uses a mobile preview sheet', async ({ page }) => {
+		await switchSnippetView(page, 'Card view')
+
+		try {
+			const grid = page.locator('.snippets-card-grid')
+			const card = grid.locator('.code-snippets-card').first()
+			const title = card.locator('.snippet-card-header h3')
+			const footer = card.locator('footer')
+
+			await expect(grid).toHaveCSS('column-gap', '16px')
+			await expect(title).toHaveCSS('font-size', '16px')
+			await expect(footer).toHaveCSS('background-color', 'rgb(247, 247, 248)')
+			await expect(card.locator('.snippet-card-select')).toBeHidden()
+
+			const cardBox = await card.boundingBox()
+			expect(cardBox?.x).toBeCloseTo(18, 0)
+			expect((cardBox?.x ?? 0) + (cardBox?.width ?? 0)).toBeCloseTo(422, 0)
+
+			await card.getByRole('button', { name: 'Preview' }).click()
+
+			const modal = page.locator('.components-modal__frame.code-snippets-preview-modal')
+			await expect(modal).toBeVisible()
+			await expect(modal).toHaveCSS('width', '404px')
+			await expect(modal).toHaveCSS('height', '964px')
+
+			const modalTitleBox = await modal.locator('.components-modal__header-heading').boundingBox()
+			const modalBadgeBox = await modal.locator('.code-snippets-preview-modal__badge').boundingBox()
+			expect((modalTitleBox?.x ?? 0) + (modalTitleBox?.width ?? 0))
+				.toBeLessThanOrEqual(modalBadgeBox?.x ?? 0)
+		} finally {
+			await page.keyboard.press('Escape')
+			await switchSnippetView(page, 'Table view').catch(() => undefined)
+		}
+	})
 })

From f0ce5ff433b960872da14a8107c5af2278415cd1 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 20:52:18 +0300
Subject: [PATCH 3/7] feat: add mobile snippet row accordions

---
 src/css/common/list-table/_layout.scss        |   5 +
 src/css/manage.scss                           |   1 +
 src/css/manage/_mobile-list.scss              | 275 ++++++++++++++++++
 .../ManageMenu/SnippetsTable/RowActions.tsx   |  37 ++-
 .../SnippetsTable/SnippetsListTable.tsx       |  20 +-
 .../ManageMenu/SnippetsTable/TableColumns.tsx |  26 +-
 .../components/common/ListTable/ListTable.tsx |   4 +
 .../components/common/ListTable/TableRows.tsx |  88 +++++-
 tests/e2e/code-snippets-mobile.spec.ts        |  62 ++++
 9 files changed, 487 insertions(+), 31 deletions(-)
 create mode 100644 src/css/manage/_mobile-list.scss

diff --git a/src/css/common/list-table/_layout.scss b/src/css/common/list-table/_layout.scss
index 46a72eb44..8ca831568 100644
--- a/src/css/common/list-table/_layout.scss
+++ b/src/css/common/list-table/_layout.scss
@@ -93,6 +93,11 @@
 		position: relative;
 		inset-inline-start: 0;
 
+		.row-action,
+		.row-action-separator {
+			font-size: inherit;
+		}
+
 		// Row-action buttons render as plain inline links. On WP 7.0 the generic `.button`
 		// compatibility styling would otherwise give them a fill, border, radius and fixed
 		// height, so fully neutralise it here (this rule is emitted after the wp-admin layer
diff --git a/src/css/manage.scss b/src/css/manage.scss
index 2fe19de9e..baff2cc8c 100644
--- a/src/css/manage.scss
+++ b/src/css/manage.scss
@@ -16,6 +16,7 @@
 @use 'manage/cloud-community';
 @use 'manage/cloud-community-cards';
 @use 'manage/mobile-cards';
+@use 'manage/mobile-list';
 
 .tablenav .tablenav-pages {
 	margin-block-end: 0;
diff --git a/src/css/manage/_mobile-list.scss b/src/css/manage/_mobile-list.scss
new file mode 100644
index 000000000..c17036445
--- /dev/null
+++ b/src/css/manage/_mobile-list.scss
@@ -0,0 +1,275 @@
+@use '../common/theme';
+
+.mobile-column-title,
+.mobile-cell-label,
+.mobile-row-toggle {
+	display: none;
+}
+
+@media (width <= 480px) {
+	.snippets-table-view {
+		margin-inline: 8px 6px;
+	}
+
+	.snippets-list-view .wp-list-table {
+		display: block;
+		overflow: hidden;
+		inline-size: 100%;
+		border: 1px solid theme.$control-border;
+		border-radius: 5px;
+		box-sizing: border-box;
+
+		thead,
+		tbody,
+		tfoot {
+			display: block;
+		}
+
+		thead tr,
+		tfoot tr {
+			display: grid;
+			grid-template-columns: 20px minmax(0, 1fr);
+			align-items: center;
+			gap: 16px;
+			min-block-size: 37px;
+			padding-block: 8px;
+			padding-inline: 16px;
+			background: theme.$background-light;
+			box-sizing: border-box;
+		}
+
+		thead td,
+		thead th,
+		tfoot td,
+		tfoot th {
+			display: none;
+			padding: 0;
+			background: theme.$background-light;
+		}
+
+		thead .check-column,
+		tfoot .check-column {
+			display: flex;
+			grid-column: 1;
+			align-items: center;
+			inline-size: 20px;
+			border: 0;
+		}
+
+		thead .column-name,
+		tfoot .column-name {
+			display: block;
+			grid-column: 2;
+			inline-size: auto;
+			min-inline-size: 0;
+			font-size: 14px;
+			font-weight: 590;
+			line-height: 1.5;
+			color: #2c3337;
+		}
+
+		thead th.sortable .list-table-sort-button,
+		thead th.sorted .list-table-sort-button,
+		tfoot th.sortable .list-table-sort-button,
+		tfoot th.sorted .list-table-sort-button {
+			gap: 4px;
+			padding: 0;
+			color: #2c3337;
+		}
+
+		thead input[type='checkbox'],
+		tfoot input[type='checkbox'],
+		tbody input[type='checkbox']:not(.switch) {
+			inline-size: 20px;
+			block-size: 20px;
+			margin: 0;
+		}
+
+		.desktop-column-title {
+			display: none;
+		}
+
+		.mobile-column-title {
+			display: inline;
+		}
+
+		tbody tr.snippet {
+			position: relative;
+			display: grid;
+			grid-template-columns: 20px 36px minmax(0, 1fr);
+			column-gap: 16px;
+			align-items: start;
+			overflow: hidden;
+			block-size: 64px;
+			padding-block: 20px;
+			padding-inline: 16px;
+			border-block-end: 1px solid theme.$border-light;
+			background: #fff;
+			box-sizing: border-box;
+		}
+
+		tbody tr.snippet > th,
+		tbody tr.snippet > td {
+			display: none;
+			padding: 0 !important;
+			background: transparent !important;
+			border: 0;
+			box-shadow: none !important;
+		}
+
+		tbody tr.snippet > .check-column,
+		tbody tr.snippet > .column-activate,
+		tbody tr.snippet > .column-name {
+			display: block;
+		}
+
+		tbody tr.snippet > .check-column {
+			grid-column: 1;
+			inline-size: 20px;
+		}
+
+		tbody tr.snippet > .column-activate {
+			grid-column: 2;
+			inline-size: 36px;
+
+			input.switch {
+				margin: 0;
+			}
+		}
+
+		tbody tr.snippet > .column-name {
+			grid-column: 3;
+			min-inline-size: 0;
+			padding-inline-end: 32px !important;
+			font-size: 16px;
+			font-weight: 590;
+			line-height: 1.5;
+
+			> .snippet-name {
+				display: block;
+				overflow: hidden;
+				max-inline-size: 100%;
+				color: theme.$accent;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.row-actions {
+				display: none;
+				margin-block-start: 16px;
+				font-size: 13px;
+				font-weight: 400;
+				line-height: 20px;
+				white-space: nowrap;
+			}
+		}
+
+		.mobile-row-toggle {
+			position: absolute;
+			inset-block-start: 20px;
+			inset-inline-end: 16px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			inline-size: 24px;
+			block-size: 24px;
+			padding: 0;
+			border: 0;
+			background: transparent;
+			color: #646970;
+			cursor: pointer;
+
+			.dashicons {
+				inline-size: 24px;
+				block-size: 24px;
+				font-size: 24px;
+			}
+
+			&:focus-visible {
+				outline: 2px solid theme.$accent;
+				outline-offset: 2px;
+			}
+		}
+
+		tbody tr.is-mobile-expanded {
+			block-size: auto;
+			row-gap: 16px;
+
+			.mobile-row-toggle .dashicons {
+				transform: rotate(180deg);
+			}
+
+			> .column-name .row-actions {
+				display: block;
+			}
+
+			> td:not(.column-activate, .column-name, .hidden) {
+				display: grid;
+				grid-column: 1 / -1;
+				grid-template-columns: 76px minmax(0, 1fr);
+				gap: 10px;
+				inline-size: auto;
+				min-inline-size: 0;
+				max-inline-size: none;
+				font-size: 13px;
+				line-height: 20px;
+				text-align: start;
+				white-space: normal;
+
+				.mobile-cell-label {
+					display: block;
+					font-weight: 590;
+					color: #2c3337;
+				}
+
+				.mobile-cell-value {
+					min-inline-size: 0;
+				}
+			}
+
+			> td.column-date {
+				inline-size: auto;
+				min-inline-size: 0;
+				max-inline-size: none;
+
+				.modified-column-content {
+					text-align: start;
+				}
+			}
+
+			> td.column-desc .snippet-description-content {
+				max-inline-size: none;
+			}
+
+			> td.priority-column input {
+				inline-size: 65px;
+				block-size: 29px;
+				min-block-size: 29px;
+			}
+		}
+
+		tbody tr.no-items {
+			display: block;
+			padding-block: 20px;
+			padding-inline: 16px;
+
+			.colspanchange {
+				display: block;
+				padding: 0;
+			}
+		}
+
+		.row-action-preview {
+			display: none;
+		}
+
+		.row-action-separator {
+			margin-inline: 8px;
+			color: #646970;
+		}
+
+		.row-action-edit .row-action-separator {
+			display: none;
+		}
+	}
+}
diff --git a/src/js/components/ManageMenu/SnippetsTable/RowActions.tsx b/src/js/components/ManageMenu/SnippetsTable/RowActions.tsx
index 9bf2d4298..09bdf86aa 100644
--- a/src/js/components/ManageMenu/SnippetsTable/RowActions.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/RowActions.tsx
@@ -123,6 +123,23 @@ const DeleteActionLink: React.FC<{ snippet: Snippet; onSuccess: () => Promise<vo
 	)
 }
 
+interface RowActionListProps {
+	actions: { key: string; content: ReactNode }[]
+}
+
+const RowActionList: React.FC<RowActionListProps> = ({ actions }) =>
+	<>
+		{actions
+			.filter(action => action.content)
+			.map((action, index) =>
+				<span key={action.key} className={`row-action row-action-${action.key}`}>
+					{0 < index
+						? <span className="row-action-separator" aria-hidden="true"> | </span>
+						: null}
+					{action.content}
+				</span>)}
+	</>
+
 const ActionLinks = ({ snippet }: { snippet: Snippet }) => {
 	const api = useSnippetsAPI()
 	const { refreshSnippetsList } = useSnippetsList()
@@ -165,16 +182,16 @@ const ActionLinks = ({ snippet }: { snippet: Snippet }) => {
 		? <DeleteActionLink snippet={snippet} onSuccess={refreshSnippetsList} />
 		: null
 
-	return (
-		<>
-			{[Preview, Edit, Clone, Restore, Export, Delete]
-				.filter(Action => Action)
-				.reduce<ReactNode>(
-					(Actions, Action) =>
-						null === Actions ? <>{Action}</> : <>{Actions} | {Action}</>,
-					null)}
-		</>
-	)
+	return <RowActionList
+		actions={[
+			{ key: 'preview', content: Preview },
+			{ key: 'edit', content: Edit },
+			{ key: 'clone', content: Clone },
+			{ key: 'restore', content: Restore },
+			{ key: 'export', content: Export },
+			{ key: 'delete', content: Delete }
+		]}
+	/>
 }
 
 export const RowActions: React.FC<RowActionsProps> = ({ snippet }) => {
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
index d91d0e7ba..a1c4ad570 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
@@ -1,7 +1,7 @@
-import { __ } from '@wordpress/i18n'
+import { __, sprintf } from '@wordpress/i18n'
 import React, { useEffect, useMemo, useState } from 'react'
 import classnames from 'classnames'
-import { getSnippetType, isSnippetActive } from '../../../utils/snippets/snippets'
+import { getSnippetDisplayName, getSnippetType, isSnippetActive } from '../../../utils/snippets/snippets'
 import { buildUrl } from '../../../utils/urls'
 import { ListTable } from '../../common/ListTable'
 import { SnippetViewToggle } from '../../common/SnippetViewToggle'
@@ -97,6 +97,19 @@ const getRowClassName = (
 		}
 	)
 
+const getRowExpansionLabel = (snippet: Snippet, isExpanded: boolean): string =>
+	isExpanded
+		? sprintf(
+			/* translators: %s: snippet name. */
+			__('Collapse details for %s', 'code-snippets'),
+			getSnippetDisplayName(snippet)
+		)
+		: sprintf(
+			/* translators: %s: snippet name. */
+			__('Expand details for %s', 'code-snippets'),
+			getSnippetDisplayName(snippet)
+		)
+
 interface SnippetsViewProps {
 	snippetView: SnippetView
 	setSnippetView: (view: SnippetView) => void
@@ -150,6 +163,7 @@ const SnippetsView: React.FC<SnippetsViewProps> = ({
 			selectAllControl
 			endTableNav={endTableNav}
 			rowClassName={snippet => getRowClassName(snippet, activeByCondition)}
+			getRowExpansionLabel={getRowExpansionLabel}
 			noItems={<NoItemsMessage />}
 			beforeTable={<SearchResultsIndicator />}
 		/>
@@ -187,7 +201,7 @@ export const SnippetsListTable: React.FC<SnippetsListTableProps> = ({
 		<>
 			<SnippetsTableToolbar />
 
-			<div className="snippets-list-view">
+			<div className={classnames('snippets-list-view', `snippets-${snippetView}-view`)}>
 				<SnippetsView
 					snippetView={snippetView}
 					setSnippetView={setSnippetView}
diff --git a/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx b/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx
index b53f91039..8a4922c1d 100644
--- a/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx
@@ -157,6 +157,12 @@ export const DateColumn: React.FC<ColumnProps> = ({ snippet }) =>
 export const PriorityColumn: React.FC<ColumnProps> = ({ snippet }) =>
 	<SnippetPriorityInput snippet={snippet} />
 
+const TYPE_COLUMN_LABEL = __('Type', 'code-snippets')
+const DESCRIPTION_COLUMN_LABEL = __('Description', 'code-snippets')
+const TAGS_COLUMN_LABEL = __('Tags', 'code-snippets')
+const MODIFIED_COLUMN_LABEL = __('Modified', 'code-snippets')
+const PRIORITY_COLUMN_LABEL = __('Priority', 'code-snippets')
+
 const baseTableColumns: ListTableColumn<Snippet>[] = [
 	{
 		id: 'activate',
@@ -165,36 +171,44 @@ const baseTableColumns: ListTableColumn<Snippet>[] = [
 	},
 	{
 		id: 'name',
-		title: __('Name', 'code-snippets'),
+		title: <>
+			<span className="desktop-column-title">{__('Name', 'code-snippets')}</span>
+			<span className="mobile-column-title">{__('Snippet Name', 'code-snippets')}</span>
+		</>,
 		isPrimary: true,
 		sortedValue: snippet => getSnippetDisplayName(snippet).toLowerCase(),
 		render: snippet => <NameColumn snippet={snippet} />
 	},
 	{
 		id: 'type',
-		title: __('Type', 'code-snippets'),
+		title: TYPE_COLUMN_LABEL,
+		mobileLabel: TYPE_COLUMN_LABEL,
 		sortedValue: snippet => getSnippetType(snippet),
 		render: snippet => <TypeColumn snippet={snippet} />
 	},
 	{
 		id: 'desc',
-		title: __('Description', 'code-snippets'),
+		title: DESCRIPTION_COLUMN_LABEL,
+		mobileLabel: DESCRIPTION_COLUMN_LABEL,
 		render: snippet => <div className="snippet-description-content"><RawHTML>{snippet.desc}</RawHTML></div>
 	},
 	{
 		id: 'tags',
-		title: __('Tags', 'code-snippets'),
+		title: TAGS_COLUMN_LABEL,
+		mobileLabel: TAGS_COLUMN_LABEL,
 		render: snippet => <TagsColumn snippet={snippet} />
 	},
 	{
 		id: 'date',
-		title: __('Modified', 'code-snippets'),
+		title: MODIFIED_COLUMN_LABEL,
+		mobileLabel: MODIFIED_COLUMN_LABEL,
 		sortedValue: snippet => snippet.modified ? new Date(snippet.modified).toISOString() : '',
 		render: snippet => <DateColumn snippet={snippet} />
 	},
 	{
 		id: 'priority',
-		title: __('Priority', 'code-snippets'),
+		title: PRIORITY_COLUMN_LABEL,
+		mobileLabel: PRIORITY_COLUMN_LABEL,
 		sortedValue: snippet => snippet.priority,
 		render: snippet => <PriorityColumn snippet={snippet} />
 	}
diff --git a/src/js/components/common/ListTable/ListTable.tsx b/src/js/components/common/ListTable/ListTable.tsx
index 75a11116d..c2ecb23ca 100644
--- a/src/js/components/common/ListTable/ListTable.tsx
+++ b/src/js/components/common/ListTable/ListTable.tsx
@@ -14,6 +14,7 @@ export interface ListTableColumn<T> {
 	isHidden?: boolean
 	isPrimary?: boolean
 	isHeading?: boolean
+	mobileLabel?: string
 	sortedValue?: (item: T) => Key
 	defaultSortDirection?: ListTableSortDirection
 }
@@ -39,6 +40,7 @@ export interface ListTableRowsProps<T, K extends Key> {
 	columns: ListTableColumn<T>[]
 	noItems?: ReactNode
 	rowClassName?: (item: T) => string
+	getRowExpansionLabel?: (item: T, isExpanded: boolean) => string
 }
 
 export interface ListTablePaginationProps {
@@ -191,6 +193,7 @@ export const PartialDataListTable = <T, K extends Key, A extends string>({
 	beforeTable,
 	endTableNav,
 	rowClassName,
+	getRowExpansionLabel,
 	visibleItems,
 	sortDirection = 'asc',
 	extraTableNav,
@@ -219,6 +222,7 @@ export const PartialDataListTable = <T, K extends Key, A extends string>({
 				<TableRows
 					items={visibleItems}
 					{...{ getKey, columns, noItems, rowClassName, selected, setSelected }}
+					getRowExpansionLabel={getRowExpansionLabel}
 				/>
 			</TableBorder>
 		</TableNavigation>
diff --git a/src/js/components/common/ListTable/TableRows.tsx b/src/js/components/common/ListTable/TableRows.tsx
index 5dab84ed5..73baf2c29 100644
--- a/src/js/components/common/ListTable/TableRows.tsx
+++ b/src/js/components/common/ListTable/TableRows.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import classnames from 'classnames'
 import { __ } from '@wordpress/i18n'
 import type { Dispatch, Key, SetStateAction } from 'react'
@@ -37,18 +37,55 @@ const CheckboxCell = <T, K extends Key>({ item, selected, setSelected, getKey }:
 interface TableCellProps<T> {
 	item: T
 	column: ListTableColumn<T>
+	isExpanded: boolean
+	expansionLabel?: string
+	toggleExpanded: () => void
 }
 
-const TableCell = <T, >({ item, column }: TableCellProps<T>) => {
+const TableCell = <T, >({
+	item,
+	column,
+	isExpanded,
+	expansionLabel,
+	toggleExpanded
+}: TableCellProps<T>) => {
 	const className = classnames(`${column.id}-column`, `column-${column.id}`, { hidden: column.isHidden })
+	const rendered = column.render(item)
+	const label = column.mobileLabel ?? ('string' === typeof column.title ? column.title : undefined)
+	const cellContent = <>
+		{column.mobileLabel
+			? <>
+				<span className="mobile-cell-label" aria-hidden="true">{column.mobileLabel}</span>
+				<div className="mobile-cell-value">{rendered}</div>
+			</>
+			: rendered}
+		{column.isPrimary && expansionLabel
+			? <button
+				type="button"
+				className="mobile-row-toggle"
+				aria-expanded={isExpanded}
+				aria-label={expansionLabel}
+				onClick={toggleExpanded}
+			>
+				<span className="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
+			</button>
+			: null}
+	</>
 
 	return column.isHeading
-		? <th className={className}>{column.render(item)}</th>
-		: <td className={className}>{column.render(item)}</td>
+		? <th className={className} data-label={label}>
+			{cellContent}
+		</th>
+		: <td className={className} data-label={label}>
+			{cellContent}
+		</td>
 }
 
 export interface TableRowsProps<T, K extends Key>
-	extends Pick<ListTableRowsProps<T, K>, 'getKey' | 'columns' | 'noItems' | 'rowClassName'> {
+	extends Pick<
+		ListTableRowsProps<T, K>,
+		'getKey' | 'columns' | 'noItems' | 'rowClassName' | 'getRowExpansionLabel'
+	> {
 	items: T[]
 	selected: Set<K>
 	setSelected: Dispatch<SetStateAction<Set<K>>>
@@ -61,18 +98,45 @@ export const TableRows = <T, K extends Key>({
 	noItems,
 	selected,
 	setSelected,
-	rowClassName
+	rowClassName,
+	getRowExpansionLabel
 }: TableRowsProps<T, K>
-) =>
-	0 < items.length
-		? items.map(item =>
-			<tr key={getKey(item)} className={rowClassName?.(item)}>
+) => {
+	const [expanded, setExpanded] = useState(() => new Set<K>())
+
+	return 0 < items.length
+		? items.map(item => {
+			const key = getKey(item)
+			const isExpanded = expanded.has(key)
+
+			return <tr
+				key={key}
+				className={classnames(rowClassName?.(item), { 'is-mobile-expanded': isExpanded })}
+			>
 				<CheckboxCell {...{ item, selected, setSelected, getKey }} />
 
 				{columns.map(column =>
-					<TableCell key={column.id} item={item} column={column} />)}
+					<TableCell
+						key={column.id}
+						item={item}
+						column={column}
+						isExpanded={isExpanded}
+						expansionLabel={getRowExpansionLabel?.(item, isExpanded)}
+						toggleExpanded={() => {
+							setExpanded(previous => {
+								const updated = new Set(previous)
+								if (updated.has(key)) {
+									updated.delete(key)
+								} else {
+									updated.add(key)
+								}
+								return updated
+							})
+						}}
+					/>)}
 			</tr>
-		)
+		})
 		: <tr className="no-items">
 			<td className="colspanchange" colSpan={columns.length}>{noItems}</td>
 		</tr>
+}
diff --git a/tests/e2e/code-snippets-mobile.spec.ts b/tests/e2e/code-snippets-mobile.spec.ts
index 0b278719b..97b6d2c7f 100644
--- a/tests/e2e/code-snippets-mobile.spec.ts
+++ b/tests/e2e/code-snippets-mobile.spec.ts
@@ -88,4 +88,66 @@ test.describe('Mobile snippets views', () => {
 			await switchSnippetView(page, 'Table view').catch(() => undefined)
 		}
 	})
+
+	test('Expands list rows into accessible snippet details', async ({ page }) => {
+		await switchSnippetView(page, 'Table view')
+
+		const table = page.locator('.snippets-list-view .wp-list-table')
+		const heading = table.locator('thead .column-name')
+		const footerHeading = table.locator('tfoot .column-name')
+		const row = table.locator('tbody tr.snippet').first()
+		const toggle = row.locator('.mobile-row-toggle')
+
+		await expect(toggle).toBeVisible({ timeout: 5000 })
+		await expect(toggle).toHaveAccessibleName(/Expand details for/)
+		await expect(heading).toContainText('Snippet Name')
+		await expect(footerHeading).toContainText('Snippet Name')
+		await expect(heading).toHaveCSS('background-color', 'rgb(247, 247, 248)')
+		await expect(table.locator('thead .column-type')).toBeHidden()
+		await expect(toggle).toHaveAttribute('aria-expanded', 'false')
+
+		const tableBox = await table.boundingBox()
+		const collapsedRowBox = await row.boundingBox()
+		expect(tableBox?.x).toBeCloseTo(18, 0)
+		expect((tableBox?.x ?? 0) + (tableBox?.width ?? 0)).toBeCloseTo(422, 0)
+		expect(collapsedRowBox?.height).toBeCloseTo(64, 0)
+
+		await toggle.click()
+		await expect(toggle).toHaveAttribute('aria-expanded', 'true')
+		await expect(toggle).toHaveAccessibleName(/Collapse details for/)
+		await expect(row).toHaveClass(/is-mobile-expanded/)
+
+		for (const [column, label] of [
+			['type', 'Type'],
+			['desc', 'Description'],
+			['tags', 'Tags'],
+			['date', 'Modified'],
+			['priority', 'Priority']
+		]) {
+			const cell = row.locator(`.column-${column}`)
+			await expect(cell).toBeVisible()
+			await expect(cell).toHaveAttribute('data-label', label)
+		}
+
+		const typeCell = row.locator('.column-type')
+		const typeValue = typeCell.locator('.mobile-cell-value')
+		await expect(typeValue).toBeVisible()
+		const typeCellBox = await typeCell.boundingBox()
+		const typeValueBox = await typeValue.boundingBox()
+		expect(typeValueBox?.x).toBeCloseTo((typeCellBox?.x ?? 0) + 86, 0)
+
+		const rowActions = row.locator('.row-actions')
+		await expect(rowActions).toBeVisible()
+		await expect(rowActions.getByText('Preview', { exact: true })).toBeHidden()
+		await expect(rowActions.getByText('Edit', { exact: true })).toBeVisible()
+		await expect(rowActions.getByText('Clone', { exact: true })).toBeVisible()
+		await expect(rowActions.getByText('Export', { exact: true })).toBeVisible()
+		await expect(rowActions.getByText('Trash', { exact: true })).toBeVisible()
+		await expect(rowActions.locator('.row-action-clone .row-action-separator'))
+			.toHaveCSS('font-size', '13px')
+
+		await toggle.click()
+		await expect(row).not.toHaveClass(/is-mobile-expanded/)
+		await expect(row.locator('.column-type')).toBeHidden()
+	})
 })

From 784d5b944273b5ccecdb44532249598f2de4dd68 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 21:11:03 +0300
Subject: [PATCH 4/7] feat: adapt snippet controls for mobile

---
 src/css/common/list-table/_pagination.scss    |   2 +-
 src/css/manage.scss                           |   1 +
 src/css/manage/_mobile-controls.scss          | 169 ++++++++++++++++++
 .../SnippetsTable/SnippetsTableControls.tsx   |  33 +++-
 .../SnippetsTable/SnippetsTableSearch.tsx     |   7 +
 .../common/ListTable/TableNavigation.tsx      |   2 +-
 .../ListTable/TablePaginationNavigation.tsx   |   9 +-
 tests/e2e/code-snippets-list.spec.ts          |   4 +-
 tests/e2e/code-snippets-mobile.spec.ts        |  76 ++++++++
 9 files changed, 289 insertions(+), 14 deletions(-)
 create mode 100644 src/css/manage/_mobile-controls.scss

diff --git a/src/css/common/list-table/_pagination.scss b/src/css/common/list-table/_pagination.scss
index fd42d4d38..ff1c8923d 100644
--- a/src/css/common/list-table/_pagination.scss
+++ b/src/css/common/list-table/_pagination.scss
@@ -70,7 +70,7 @@
 }
 
 .wrap .snippets-search-area input[type='search'] {
-	border-color: #e3e3e4;
+	border-color: theme.$border-light;
 }
 
 // Tablet widths: let the search area grow to fill the remainder of its row
diff --git a/src/css/manage.scss b/src/css/manage.scss
index baff2cc8c..a34945f26 100644
--- a/src/css/manage.scss
+++ b/src/css/manage.scss
@@ -17,6 +17,7 @@
 @use 'manage/cloud-community-cards';
 @use 'manage/mobile-cards';
 @use 'manage/mobile-list';
+@use 'manage/mobile-controls';
 
 .tablenav .tablenav-pages {
 	margin-block-end: 0;
diff --git a/src/css/manage/_mobile-controls.scss b/src/css/manage/_mobile-controls.scss
new file mode 100644
index 000000000..99fa49125
--- /dev/null
+++ b/src/css/manage/_mobile-controls.scss
@@ -0,0 +1,169 @@
+@use '../common/theme';
+
+.snippets-list-view .snippets-search-submit,
+.mobile-clear-recently-active,
+.mobile-paging-input {
+	display: none;
+}
+
+.snippets-list-view .tablenav .snippets-tag-filter-bottom {
+	display: none;
+}
+
+@media (width <= 480px) {
+	.snippets-table-toolbar {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
+		margin-block-end: 0;
+		margin-inline: 8px 6px;
+
+		.subsubsub {
+			overflow-x: auto;
+			flex-wrap: nowrap;
+			max-inline-size: 100%;
+			white-space: nowrap;
+			scrollbar-width: none;
+
+			&::-webkit-scrollbar {
+				display: none;
+			}
+		}
+
+		.mobile-clear-recently-active {
+			display: block;
+
+			.button {
+				block-size: auto;
+				min-block-size: 0;
+				padding: 0;
+				border: 0;
+				background: transparent;
+				box-shadow: none;
+				color: theme.$accent;
+				font-size: 13px;
+				font-weight: 400;
+				line-height: 1.5;
+
+				&:hover,
+				&:focus {
+					border: 0;
+					background: transparent;
+					box-shadow: none;
+					color: theme.$accent-hover;
+				}
+			}
+		}
+	}
+
+	.snippets-list-view .tablenav.top {
+		flex-wrap: nowrap;
+		gap: 12px;
+		margin-block: 16px;
+
+		.bulkactions,
+		.tablenav-select-all,
+		.snippets-tag-filter-top,
+		.desktop-clear-recently-active,
+		.tablenav-pages-nav {
+			display: none;
+		}
+
+		.snippets-search-area {
+			flex: 1 1 0;
+			inline-size: auto;
+			min-inline-size: 0;
+			max-inline-size: none;
+
+			search {
+				display: flex;
+				flex: 1 1 auto;
+				align-items: center;
+				gap: 8px;
+				min-inline-size: 0;
+			}
+
+			input[type='search'] {
+				flex: 1 1 0;
+				min-inline-size: 0;
+				border-color: theme.$border-light;
+			}
+		}
+
+		.snippets-search-submit {
+			display: inline-flex;
+			flex: 0 0 auto;
+			align-items: center;
+			justify-content: center;
+			background: #fff;
+		}
+
+		.tablenav-end-group {
+			flex: 0 0 auto;
+			gap: 0;
+			margin-inline-start: 0;
+		}
+	}
+
+	.snippets-table-view .tablenav.bottom {
+		align-items: center;
+		gap: 24px 12px;
+		margin-block: 16px 0;
+
+		.bulkactions {
+			display: flex;
+			flex: 0 0 200px;
+			gap: 8px;
+
+			select {
+				flex: 0 0 154px;
+				inline-size: 154px;
+				min-inline-size: 0;
+				max-inline-size: 154px;
+			}
+
+			.button.action {
+				flex: 0 0 38px;
+				inline-size: 38px;
+				padding: 0;
+			}
+		}
+
+		.snippets-tag-filter-bottom {
+			display: flex;
+			flex: 0 0 154px;
+
+			select {
+				flex: 0 0 154px;
+				inline-size: 154px;
+				min-inline-size: 0;
+				max-inline-size: 154px;
+			}
+		}
+
+		.tablenav-end-group {
+			flex: 1 0 100%;
+			order: 2;
+			margin-inline-start: 0;
+		}
+
+		.tablenav-pages .displaying-num {
+			display: inline;
+		}
+	}
+
+	.snippets-card-view .tablenav.bottom {
+		.bulkactions,
+		.snippets-tag-filter-bottom {
+			display: none;
+		}
+	}
+
+	.desktop-paging-input {
+		display: none;
+	}
+
+	.mobile-paging-input {
+		display: inline-flex;
+	}
+}
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
index 524b6ae32..581f4bb20 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
@@ -1,5 +1,6 @@
 import { __, _x, sprintf } from '@wordpress/i18n'
 import React, { Fragment, useMemo } from 'react'
+import classnames from 'classnames'
 import { useRestAPI } from '../../../hooks/useRestAPI'
 import { useSnippetsList } from '../../../hooks/useSnippetsList'
 import { handleUnknownError } from '../../../utils/errors'
@@ -60,16 +61,24 @@ const SnippetStatusCounts = () => {
 	)
 }
 
-const ClearRecentlyActiveButton: React.FC = () => {
+interface ClearRecentlyActiveButtonProps {
+	className?: string
+	name?: string
+}
+
+const ClearRecentlyActiveButton: React.FC<ClearRecentlyActiveButtonProps> = ({
+	className,
+	name = 'clear-recent-list'
+}) => {
 	const { api } = useRestAPI()
 	const { refreshSnippetsList } = useSnippetsList()
 	const { currentStatus } = useSnippetsFilters()
 
 	return 'recently_active' === currentStatus
-		? <div className="alignleft actions">
+		? <div className={classnames('alignleft actions', className)}>
 			<SubmitButton
 				secondary
-				name="clear-recent-list"
+				name={name}
 				text={__('Clear List', 'code-snippets')}
 				onClick={event => {
 					event.preventDefault()
@@ -83,11 +92,13 @@ const ClearRecentlyActiveButton: React.FC = () => {
 }
 
 interface FilterByTagControlProps {
+	which: 'top' | 'bottom'
 	visibleSnippets: Snippet[]
 }
 
-const FilterByTagControl: React.FC<FilterByTagControlProps> = ({ visibleSnippets }) => {
+const FilterByTagControl: React.FC<FilterByTagControlProps> = ({ which, visibleSnippets }) => {
 	const { currentTag, setCurrentTag } = useSnippetsFilters()
+	const controlId = 'top' === which ? 'snippets-tag-filter' : 'snippets-tag-filter-bottom'
 
 	const tagsList: Set<string> = useMemo(
 		() => visibleSnippets.reduce((tags, snippet) => {
@@ -97,12 +108,12 @@ const FilterByTagControl: React.FC<FilterByTagControlProps> = ({ visibleSnippets
 		[visibleSnippets])
 
 	return 0 < tagsList.size
-		? <div className="alignleft actions">
-			<label htmlFor="snippets-tag-filter" className="screen-reader-text">
+		? <div className={classnames('alignleft actions', 'snippets-tag-filter', `snippets-tag-filter-${which}`)}>
+			<label htmlFor={controlId} className="screen-reader-text">
 				{__('Filter snippets by tag', 'code-snippets')}
 			</label>
 			<select
-				id="snippets-tag-filter"
+				id={controlId}
 				name="tag"
 				value={currentTag}
 				onChange={event => setCurrentTag(event.target.value)}
@@ -125,12 +136,16 @@ export const SnippetsTableNavigation: React.FC<SnippetsTableNavigationProps> = (
 	visibleSnippets
 }) =>
 	<>
-		{'top' === which && <FilterByTagControl visibleSnippets={visibleSnippets} />}
-		<ClearRecentlyActiveButton />
+		<FilterByTagControl which={which} visibleSnippets={visibleSnippets} />
+		{'top' === which && <ClearRecentlyActiveButton className="desktop-clear-recently-active" />}
 		{'top' === which && <SearchArea />}
 	</>
 
 export const SnippetsTableToolbar = () =>
 	<div className="snippets-table-toolbar">
 		<SnippetStatusCounts />
+		<ClearRecentlyActiveButton
+			className="mobile-clear-recently-active"
+			name="clear-recent-list-mobile"
+		/>
 	</div>
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
index 63785a8d9..9d14044c7 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
@@ -17,6 +17,13 @@ const SearchBox = () => {
 				onChange={event => setSearchQuery(event.target.value)}
 				placeholder={__('Search snippets', 'code-snippets')}
 			/>
+			<Button
+				secondary
+				className="snippets-search-submit"
+				onClick={() => setSearchQuery(searchQuery)}
+			>
+				{__('Search', 'code-snippets')}
+			</Button>
 		</search>
 	)
 }
diff --git a/src/js/components/common/ListTable/TableNavigation.tsx b/src/js/components/common/ListTable/TableNavigation.tsx
index 41b9be3c8..d4bc888cc 100644
--- a/src/js/components/common/ListTable/TableNavigation.tsx
+++ b/src/js/components/common/ListTable/TableNavigation.tsx
@@ -203,7 +203,7 @@ export const TableNav = <K extends Key, A extends string>({
 				? <SelectAllControl keys={selectAllKeys} selected={selected} setSelected={setSelected} />
 				: null}
 
-			{isTop ? extraTableNav?.(which) : null}
+			{extraTableNav?.(which)}
 
 			{0 < totalPages || isTop && endTableNav
 				? <div className="tablenav-end-group">
diff --git a/src/js/components/common/ListTable/TablePaginationNavigation.tsx b/src/js/components/common/ListTable/TablePaginationNavigation.tsx
index 7f8fbbe07..9e4da2d1e 100644
--- a/src/js/components/common/ListTable/TablePaginationNavigation.tsx
+++ b/src/js/components/common/ListTable/TablePaginationNavigation.tsx
@@ -165,12 +165,19 @@ const CurrentPage: React.FC<CurrentPageProps> = ({
 		? <>
 			{/* translators: Hidden accessibility text. */}
 			<span className="screen-reader-text">{__('Current Page', 'code-snippets')}</span>
-			<span className="paging-input">
+			<span className="paging-input desktop-paging-input">
 				<span className="tablenav-paging-text">
 					{/* translators: 1: Current page. 2: Total pages. */
 						sprintf(_x('%1$s of %2$s', 'paging', 'code-snippets'), currentPage, totalPages)}
 				</span>
 			</span>
+			<span className="paging-input mobile-paging-input">
+				<PagingInput which={which} totalPages={totalPages} {...inputProps} />
+				<span className="tablenav-paging-text">
+					{_x(' of ', 'paging', 'code-snippets')}
+					<span className="total-pages">{totalPages}</span>
+				</span>
+			</span>
 		</>
 		: <span className="paging-input">
 			<PagingInput which={which} totalPages={totalPages} {...inputProps} />
diff --git a/tests/e2e/code-snippets-list.spec.ts b/tests/e2e/code-snippets-list.spec.ts
index 087c6bb68..c023f39da 100644
--- a/tests/e2e/code-snippets-list.spec.ts
+++ b/tests/e2e/code-snippets-list.spec.ts
@@ -36,7 +36,7 @@ test.describe('Code Snippets List Page Actions', () => {
 		await helper.cleanupSnippet(snippetName)
 	})
 
-	test('Filters snippets as the search query changes without a submit control', async ({ page }) => {
+	test('Filters snippets as the search query changes with the desktop submit control hidden', async ({ page }) => {
 		const search = page.getByRole('search')
 		const searchInput = search.getByRole('searchbox', { name: 'Search Snippets:' })
 		const snippetRow = page.getByRole('row', { name: new RegExp(snippetName) })
@@ -46,7 +46,7 @@ test.describe('Code Snippets List Page Actions', () => {
 		await expect(snippetRow).toBeVisible()
 		await searchInput.fill(`${snippetName}-does-not-exist`)
 		await expect(snippetRow).toBeHidden()
-		await expect(search.getByRole('button', { name: 'Search' })).toHaveCount(0)
+		await expect(search.getByRole('button', { name: 'Search' })).toBeHidden()
 	})
 
 	test('Card action popovers let keyboard focus continue through the document', async ({ page }) => {
diff --git a/tests/e2e/code-snippets-mobile.spec.ts b/tests/e2e/code-snippets-mobile.spec.ts
index 97b6d2c7f..77917b459 100644
--- a/tests/e2e/code-snippets-mobile.spec.ts
+++ b/tests/e2e/code-snippets-mobile.spec.ts
@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test'
 import { URLS } from './helpers/constants'
+import { SnippetsTestHelper } from './helpers/SnippetsTestHelper'
 import type { Page } from '@playwright/test'
 
 const MOBILE_VIEWPORT = { width: 440, height: 1000 }
@@ -150,4 +151,79 @@ test.describe('Mobile snippets views', () => {
 		await expect(row).not.toHaveClass(/is-mobile-expanded/)
 		await expect(row.locator('.column-type')).toBeHidden()
 	})
+
+	test('Uses mobile search controls and a complete bottom toolbar', async ({ page }) => {
+		await SnippetsTestHelper.setSnippetsPerPage(2)
+
+		try {
+			await page.reload()
+			await switchSnippetView(page, 'Table view')
+
+			const top = page.locator('.snippets-table-view .tablenav.top')
+			const bottom = page.locator('.snippets-table-view .tablenav.bottom')
+			const search = top.getByRole('search')
+			const searchInput = search.getByRole('searchbox', { name: 'Search Snippets:' })
+			const searchButton = search.getByRole('button', { name: 'Search' })
+
+			await expect(searchButton).toBeVisible({ timeout: 5000 })
+			await expect(top.locator('.bulkactions')).toBeHidden()
+			await expect(top.locator('.tablenav-select-all')).toBeHidden()
+			await expect(top.locator('.snippets-tag-filter')).toBeHidden()
+			await expect(top.locator('.tablenav-pages-nav')).toBeHidden()
+			await expect(searchInput).toBeVisible()
+			await expect(searchInput).toHaveCSS('border-color', 'rgb(226, 226, 228)')
+			await expect(top.locator('.snippet-view-toggle')).toBeVisible()
+
+			const topBox = await top.boundingBox()
+			expect(topBox?.x).toBeCloseTo(18, 0)
+			expect((topBox?.x ?? 0) + (topBox?.width ?? 0)).toBeCloseTo(422, 0)
+
+			await expect(bottom.locator('.bulkactions')).toBeVisible()
+			await expect(bottom.getByRole('combobox', { name: 'Filter snippets by tag' })).toBeVisible()
+			await expect(bottom.locator('.tablenav-pages-nav')).toBeVisible()
+			await expect(bottom.locator('#current-page-selector-bottom')).toHaveValue('1')
+			await expect(bottom.locator('.pagination-links .button')).toHaveCount(4)
+
+			await switchSnippetView(page, 'Card view')
+			const cardBottom = page.locator('.snippets-card-view .tablenav.bottom')
+			await expect(cardBottom.locator('.bulkactions')).toBeHidden()
+			await expect(cardBottom.locator('.snippets-tag-filter')).toBeHidden()
+		} finally {
+			await switchSnippetView(page, 'Table view').catch(() => undefined)
+			await SnippetsTestHelper.resetSnippetsPerPage()
+		}
+	})
+
+	test('Keeps Clear List with the mobile status controls', async ({ page }) => {
+		const snippetName = SnippetsTestHelper.makeUniqueSnippetName('Mobile Recently Active')
+		await SnippetsTestHelper.createSnippetViaCli({ name: snippetName, active: true })
+
+		try {
+			await page.reload()
+			await switchSnippetView(page, 'Table view')
+			await page.getByRole('searchbox', { name: 'Search Snippets:' }).fill(snippetName)
+
+			const row = page.locator('tbody tr.snippet').filter({ hasText: snippetName })
+			const activeSwitch = row.getByRole('switch')
+			await expect(activeSwitch).toBeChecked()
+			await activeSwitch.click()
+			await expect(activeSwitch).not.toBeChecked()
+
+			const toolbar = page.locator('.snippets-table-toolbar')
+			const statusLinks = toolbar.locator('.subsubsub')
+			await statusLinks.getByRole('link', { name: /^Recently Active/ }).click()
+
+			const clearButton = toolbar.getByRole('button', { name: 'Clear List' })
+			await expect(clearButton).toBeVisible()
+			await expect(page.locator('.tablenav.top .desktop-clear-recently-active')).toBeHidden()
+
+			const statusLinksBox = await statusLinks.boundingBox()
+			const clearButtonBox = await clearButton.boundingBox()
+			expect(clearButtonBox?.y).toBeGreaterThan(
+				(statusLinksBox?.y ?? 0) + (statusLinksBox?.height ?? 0)
+			)
+		} finally {
+			await SnippetsTestHelper.cleanupSnippetsByPrefix(snippetName)
+		}
+	})
 })

From c842a3f8f107bd05d971fe962b2e43e80bc8e720 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 21:11:46 +0300
Subject: [PATCH 5/7] fix: mirror mobile tab fade in RTL

---
 src/css/common/_subnav.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index 78842b8e9..15be18a24 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -260,6 +260,7 @@
 		block-size: 52px;
 		background: linear-gradient(90deg, rgb(255 255 255 / 0%), #fff);
 		pointer-events: none;
+		transform: scaleX(var(--cs-direction-multiplier));
 	}
 
 	.snippets-screen-meta-slot {

From 1e8c3713c7fb74e784e4ceb71f984633d5ed3b9d Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 21:22:10 +0300
Subject: [PATCH 6/7] fix: contain narrow mobile pagination

---
 src/css/manage/_mobile-controls.scss   | 9 +++++++++
 tests/e2e/code-snippets-mobile.spec.ts | 7 +++++++
 2 files changed, 16 insertions(+)

diff --git a/src/css/manage/_mobile-controls.scss b/src/css/manage/_mobile-controls.scss
index 99fa49125..c13be0182 100644
--- a/src/css/manage/_mobile-controls.scss
+++ b/src/css/manage/_mobile-controls.scss
@@ -150,6 +150,15 @@
 		.tablenav-pages .displaying-num {
 			display: inline;
 		}
+
+		.tablenav-pages-nav {
+			inline-size: 100%;
+			min-inline-size: 0;
+		}
+
+		.tablenav-pages {
+			flex-wrap: wrap;
+		}
 	}
 
 	.snippets-card-view .tablenav.bottom {
diff --git a/tests/e2e/code-snippets-mobile.spec.ts b/tests/e2e/code-snippets-mobile.spec.ts
index 77917b459..f4936d9b8 100644
--- a/tests/e2e/code-snippets-mobile.spec.ts
+++ b/tests/e2e/code-snippets-mobile.spec.ts
@@ -184,6 +184,13 @@ test.describe('Mobile snippets views', () => {
 			await expect(bottom.locator('#current-page-selector-bottom')).toHaveValue('1')
 			await expect(bottom.locator('.pagination-links .button')).toHaveCount(4)
 
+			await page.setViewportSize({ width: 320, height: MOBILE_VIEWPORT.height })
+			const pageWidth = await page.evaluate(() => ({
+				scroll: document.documentElement.scrollWidth,
+				viewport: window.innerWidth
+			}))
+			expect(pageWidth.scroll).toBe(pageWidth.viewport)
+
 			await switchSnippetView(page, 'Card view')
 			const cardBottom = page.locator('.snippets-card-view .tablenav.bottom')
 			await expect(cardBottom.locator('.bulkactions')).toBeHidden()

From 89898ccb62f80d0a13e1c5cdeb2c343a6a6ed213 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 21:41:23 +0300
Subject: [PATCH 7/7] fix: enlarge mobile row toggle target

---
 src/css/manage/_mobile-list.scss       | 8 ++++----
 tests/e2e/code-snippets-mobile.spec.ts | 3 +++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/css/manage/_mobile-list.scss b/src/css/manage/_mobile-list.scss
index c17036445..54fd14879 100644
--- a/src/css/manage/_mobile-list.scss
+++ b/src/css/manage/_mobile-list.scss
@@ -166,13 +166,13 @@
 
 		.mobile-row-toggle {
 			position: absolute;
-			inset-block-start: 20px;
-			inset-inline-end: 16px;
+			inset-block-start: 12px;
+			inset-inline-end: 8px;
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			inline-size: 24px;
-			block-size: 24px;
+			inline-size: 40px;
+			block-size: 40px;
 			padding: 0;
 			border: 0;
 			background: transparent;
diff --git a/tests/e2e/code-snippets-mobile.spec.ts b/tests/e2e/code-snippets-mobile.spec.ts
index f4936d9b8..8665fc8f3 100644
--- a/tests/e2e/code-snippets-mobile.spec.ts
+++ b/tests/e2e/code-snippets-mobile.spec.ts
@@ -101,6 +101,9 @@ test.describe('Mobile snippets views', () => {
 
 		await expect(toggle).toBeVisible({ timeout: 5000 })
 		await expect(toggle).toHaveAccessibleName(/Expand details for/)
+		await expect(toggle).toHaveCSS('width', '40px')
+		await expect(toggle).toHaveCSS('height', '40px')
+		await expect(toggle.locator('.dashicons')).toHaveCSS('width', '24px')
 		await expect(heading).toContainText('Snippet Name')
 		await expect(footerHeading).toContainText('Snippet Name')
 		await expect(heading).toHaveCSS('background-color', 'rgb(247, 247, 248)')