feat: add mobile snippet views

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;

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 {

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;
+		}
+	}
+}

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,22 @@
 	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;
+		transform: scaleX(var(--cs-direction-multiplier));
+	}
+
+	.snippets-screen-meta-slot {
+		display: none;
+	}
+}

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;

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;
+		}
+	}
+}

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

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

src/css/manage.scss

@@ -15,6 +15,9 @@
 @use 'manage/snippets-table';
 @use 'manage/cloud-community';
 @use 'manage/cloud-community-cards';
+@use 'manage/mobile-cards';
+@use 'manage/mobile-list';
+@use 'manage/mobile-controls';
 
 .tablenav .tablenav-pages {
 	margin-block-end: 0;

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;
+			}
+		}
+	}
+}