feat: implement finalized local snippet card design

src/css/common/_cards.scss

@@ -8,7 +8,7 @@
 .code-snippets-card {
 	background: #fff;
 	border: 1px solid #c3c4c7;
-	border-radius: 6px;
+	border-radius: 5px;
 	margin: 0;
 	display: flex;
 	flex-flow: column;
@@ -25,19 +25,46 @@
 
 	footer {
 		display: flex;
+		align-items: center;
+		justify-content: space-between;
 		gap: 8px;
-		background: #f6f7f7;
+		background: #f7f7f8;
 		margin-block-start: auto;
 		border-block-start: 1px solid #c3c4c7;
 		padding-inline: 24px;
 		padding-block: 12px;
+		border-end-start-radius: 5px;
+		border-end-end-radius: 5px;
+	}
+
+	// The status label shrinks and clips away under pressure rather than
+	// pushing the action buttons onto a second line.
+	.snippet-card-footer-status {
+		display: flex;
 		align-items: center;
-		border-end-start-radius: 6px;
-		border-end-end-radius: 6px;
+		gap: 8px;
+		flex: 0 1 auto;
+		min-inline-size: 0;
+		overflow: hidden;
+		white-space: nowrap;
 	}
 
-	&.is-selectable,
-	&.has-corner-controls {
+	.snippet-card-footer-actions {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		flex-wrap: nowrap;
+		gap: 8px;
+		flex: 0 0 auto;
+
+		.button:not(.kebab-menu-trigger) {
+			min-inline-size: 103px;
+			text-align: center;
+			justify-content: center;
+		}
+	}
+
+	&.is-selectable {
 		position: relative;
 	}
 
@@ -54,12 +81,39 @@
 		}
 	}
 
-	&.is-selectable .card-inner h3 {
-		margin-inline-end: 48px;
+	input[type='checkbox'].snippet-card-select {
+		appearance: none;
+		display: grid;
+		place-content: center;
+		inline-size: 20px;
+		block-size: 20px;
+		padding: 0;
+		box-sizing: border-box;
+		background: #fff;
+		border: 1.5px solid #2271b1;
+		border-radius: 5px;
+		box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
+		cursor: pointer;
+
+		&::before {
+			content: none;
+		}
+
+		&:checked {
+			background: #2271b1;
+
+			&::before {
+				content: '';
+				inline-size: 14px;
+				block-size: 14px;
+				margin: 0;
+				background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23fff'/%3E%3C/svg%3E") center/14px no-repeat;
+			}
+		}
 	}
 
-	&.has-corner-controls .card-inner h3 {
-		margin-inline-end: 96px;
+	&.is-selectable .card-inner > h3 {
+		margin-inline-end: 48px;
 	}
 
 	&.is-selected {

src/css/common/_modal.scss

@@ -55,15 +55,15 @@
 .components-modal__frame.code-snippets-preview-modal {
 	min-inline-size: 520px;
 	min-block-size: 240px;
-	max-inline-size: 80vw;
-	max-block-size: 80vh;
+	inline-size: min(900px, 90vw);
+	max-block-size: 85vh;
 
 	@media (width <= 600px) {
 		min-inline-size: 90vw;
 	}
 
-	.components-modal__content {
-		overflow: auto;
+	.components-modal__header {
+		border-block-end-color: #ddd;
 	}
 
 	// The badge lives in the modal content because the minimum-supported
@@ -75,12 +75,89 @@
 		inset-inline-end: 56px;
 	}
 
-	// Shown when the code editor is unavailable (syntax highlighting preference
-	// off): the raw read-only textarea is the functional fallback.
-	textarea {
-		inline-size: 100%;
-		min-block-size: 360px;
-		resize: none;
-		font-family: monospace;
+	// Header and footer stay pinned; the CodeMirror editor is the only
+	// scroll region, scrolling long code both vertically and horizontally.
+	.components-modal__content {
+		display: flex;
+		flex-flow: column;
+		min-block-size: 0;
+		padding: 0;
+		overflow: hidden;
+	}
+
+	// The modal component wraps its children in an unstyled focus container;
+	// it must join the flex chain or the editor grows to its content height.
+	.components-modal__header + div {
+		display: flex;
+		flex-flow: column;
+		flex: 1;
+		min-block-size: 0;
+		overflow: hidden;
+	}
+
+	.code-snippets-preview-modal__editor {
+		display: flex;
+		flex-flow: column;
+		flex: 1;
+		min-block-size: 0;
+
+		.CodeMirror {
+			flex: 1;
+			min-block-size: 0;
+			block-size: 100%;
+		}
+
+		textarea {
+			flex: 1;
+			min-block-size: 0;
+			inline-size: 100%;
+			resize: none;
+			font-family: monospace;
+		}
+	}
+
+	.code-snippets-preview-modal__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-shrink: 0;
+		gap: 16px;
+		padding: 11px 19px;
+		border-block-start: 1px solid #e2e2e4;
+		background: #f6f7f7;
+	}
+
+	.code-snippets-preview-modal__priority {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 14px;
+		color: #646970;
+
+		.code-snippets-preview-modal__priority-value {
+			font-weight: 600;
+			color: #2c3337;
+		}
+	}
+
+	.code-snippets-preview-modal__buttons {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+
+		.button {
+			border-radius: 5px;
+			font-size: 14px;
+		}
+
+		.button-link.code-snippets-preview-modal__trash {
+			color: #b32d2e;
+			text-decoration: none;
+
+			&:hover,
+			&:focus {
+				color: #d63638;
+			}
+		}
 	}
 }

src/css/common/_subnav.scss

@@ -134,10 +134,6 @@
 		}
 	}
 
-	.snippet-view-toggle-nav-item {
-		margin-inline-start: auto;
-		align-items: center;
-	}
 }
 
 // Card/table view toggle: a two-icon segmented pair of square tiles with
@@ -183,12 +179,6 @@
 	}
 }
 
-// Inset the toggle from the band edge when hosted inside a subnav bar.
-.snippet-type-nav .snippet-view-toggle-nav-item .snippet-view-toggle {
-	padding-inline-end: 16px;
-}
-
-
 // Slot that adopts the WordPress Screen Options / Help tabs so they appear
 // directly below the snippet-type nav instead of above the page content.
 .snippets-screen-meta-slot {
@@ -204,14 +194,12 @@
 	}
 }
 
-
 // Item count shown after a subnav tab's label, as muted text.
 .snippet-type-nav .subnav-count {
 	font-size: 14px;
 	font-weight: 600;
 	line-height: 1.5;
-	color: #2c3337;
-	opacity: 0.4;
+	color: #646970;
 }
 
 // The active tab's count adopts the accent alongside its label.

src/css/manage.scss

@@ -14,6 +14,7 @@
 @use 'common/kebab-menu';
 @use 'manage/snippets-table';
 @use 'manage/cloud-community';
+@use 'manage/cloud-community-cards';
 
 .tablenav .tablenav-pages {
 	margin-block-end: 0;