Solution for long Description column in Code Snippets

I was getting frustrated with the columns being so long if I added good documentation, so here is a new function snippet to collapse or expand the entire column or per-row

On the Code Snippets → All Snippets page:

• The Description column will now:
  • Show ~4 lines of text.
  • Fade out at the bottom when truncated.
  • Have a “Show more ▾” link under each description.
• Clicking “Show more ▾” expands that row and changes the link to “Show less ▴”.
• At the top, by the “Snippets” heading, you’ll see two buttons:
  • Expand all descriptions
  • Collapse all descriptions

This makes long descriptions much more manageable visually but still easy to fully inspect when needed.3. Notes & small warnings

• This only runs in the admin area, and only really does anything on screens where:
  • The body has toplevel_page_snippets or code-snippets_page_snippets (the Code Snippets list pages), and
  • There’s a table.wp-list-table with a td.column-description.
• If the Code Snippets plugin radically changes its HTML classes/IDs in a future update, the behavior might stop working. Quick fix in that case:
  • Inspect the table markup and update the selectors:
    • td.column-description
    • The body classes used for page detection.
• If you use list table Ajax filters/search, the page reload is full in most setups, so the JS re-runs. If at some point they switch to partial/Ajax updates, we might need to hook into their JS events—but for now, this DOMContentLoaded approach is plenty.

if ( ! function_exists( 'dl_cs_collapse_descriptions_footer' ) ) {
	function dl_cs_collapse_descriptions_footer() {
		// Only run in admin, since this is only something for admin to use, right?
		if ( ! is_admin() ) {
			return;
		}
		?>
		<style>
			/* Only target Code Snippets list screen */
			body.toplevel_page_snippets table.wp-list-table,
			body.code-snippets_page_snippets table.wp-list-table {
				/* marker so JS knows it's the right table */
			}

			/* Wrapper around the description text */
			td.column-description .dl-cs-desc-inner {
				position: relative;
				transition: max-height 0.2s ease;
			}

			/* Collapsed state: ~4 lines, with fade-out at bottom */
			td.column-description .dl-cs-desc-inner.dl-cs-desc-collapsed {
				max-height: 4.8em; /* ~4 lines depending on admin font-size */
				overflow: hidden;
			}

			td.column-description .dl-cs-desc-inner.dl-cs-desc-collapsed::after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 1.8em;
				/* fade from transparent to the admin background */
				background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
				pointer-events: none;
			}

			/* Expanded state: full height */
			td.column-description .dl-cs-desc-inner.dl-cs-desc-expanded {
				max-height: none;
				overflow: visible;
			}

			/* Per-row toggle link */
			.dl-cs-desc-toggle {
				display: inline-flex;
				align-items: center;
				margin-top: 4px;
				font-size: 11px;
				cursor: pointer;
				color: #2271b1;
				text-decoration: none;
			}

			.dl-cs-desc-toggle:hover {
				text-decoration: underline;
			}

			/* Toolbar buttons near page title */
			.dl-cs-desc-toolbar {
				display: inline-flex;
				gap: 6px;
				margin-left: 10px;
				vertical-align: middle;
			}
		</style>

		<script>
			document.addEventListener('DOMContentLoaded', function () {

				// Restrict to Code Snippets list screens (best-effort check).
				var body = document.body;
				if (
					!body.classList.contains('toplevel_page_snippets') &&
					!body.classList.contains('code-snippets_page_snippets')
				) {
					return;
				}

				var table = document.querySelector('table.wp-list-table');
				if (!table) {
					return;
				}

				var cells = table.querySelectorAll('tbody td.column-description');
				if (!cells.length) {
					return;
				}

				// Wrap description content and add per-row toggles.
				cells.forEach(function (cell) {
					// Avoid double-wrapping if page reloads via Ajax.
					if (cell.querySelector('.dl-cs-desc-inner')) {
						return;
					}

					var inner = document.createElement('div');
					inner.className = 'dl-cs-desc-inner dl-cs-desc-collapsed';

					// Move existing contents into inner wrapper.
					while (cell.firstChild) {
						inner.appendChild(cell.firstChild);
					}
					cell.appendChild(inner);

					var toggle = document.createElement('button');
					toggle.type = 'button';
					toggle.className = 'button-link dl-cs-desc-toggle';
					toggle.textContent = 'Show more ▾';

					toggle.addEventListener('click', function () {
						var isCollapsed = inner.classList.contains('dl-cs-desc-collapsed');
						if (isCollapsed) {
							inner.classList.remove('dl-cs-desc-collapsed');
							inner.classList.add('dl-cs-desc-expanded');
							toggle.textContent = 'Show less ▴';
						} else {
							inner.classList.remove('dl-cs-desc-expanded');
							inner.classList.add('dl-cs-desc-collapsed');
							toggle.textContent = 'Show more ▾';
						}
					});

					cell.appendChild(toggle);
				});

				// Add "Expand all" / "Collapse all" buttons near the page title.
				var heading = document.querySelector('.wrap h1.wp-heading-inline') ||
				              document.querySelector('.wrap h1') ||
				              document.querySelector('.wrap h2');

				if (heading && !document.getElementById('dl-cs-desc-expand-all')) {
					var toolbar = document.createElement('span');
					toolbar.className = 'dl-cs-desc-toolbar';

					var expandBtn = document.createElement('button');
					expandBtn.type = 'button';
					expandBtn.id = 'dl-cs-desc-expand-all';
					expandBtn.className = 'button';
					expandBtn.textContent = 'Expand all descriptions';

					var collapseBtn = document.createElement('button');
					collapseBtn.type = 'button';
					collapseBtn.id = 'dl-cs-desc-collapse-all';
					collapseBtn.className = 'button';
					collapseBtn.textContent = 'Collapse all descriptions';

					toolbar.appendChild(expandBtn);
					toolbar.appendChild(collapseBtn);

					heading.parentNode.insertBefore(toolbar, heading.nextSibling);

					var setAll = function (expand) {
						var inners = table.querySelectorAll('.dl-cs-desc-inner');
						var toggles = table.querySelectorAll('.dl-cs-desc-toggle');

						inners.forEach(function (inner) {
							if (expand) {
								inner.classList.add('dl-cs-desc-expanded');
								inner.classList.remove('dl-cs-desc-collapsed');
							} else {
								inner.classList.add('dl-cs-desc-collapsed');
								inner.classList.remove('dl-cs-desc-expanded');
							}
						});

						toggles.forEach(function (btn) {
							btn.textContent = expand ? 'Show less ▴' : 'Show more ▾';
						});
					};

					expandBtn.addEventListener('click', function () {
						setAll(true);
					});

					collapseBtn.addEventListener('click', function () {
						setAll(false);
					});
				}
			});
		</script>
		<?php
	}
}
add_action( 'admin_footer', 'dl_cs_collapse_descriptions_footer' );