Fix mobile slide tables and thumbnails

test/table-pagination-height.test.js

@@ -4,6 +4,42 @@ const vm = require('node:vm');
 const test = require('node:test');
 const assert = require('node:assert/strict');
 
+test('slide table thumbnails size to the canvas ratio and show the whole image', () => {
+  const stylesheet = fs.readFileSync(path.join(__dirname, '..', 'src', 'web', 'public', 'css', 'theme-custom.css'), 'utf8');
+  const thumbRule = stylesheet.match(/^\.playlist-slide-thumb\s*\{([^}]+)\}/m)[1];
+  const imageRule = stylesheet.match(/^\.playlist-slide-thumb-image\s*\{([^}]+)\}/m)[1];
+  const placeholderRule = stylesheet.match(/^\.playlist-slide-thumb-placeholder\s*\{([^}]+)\}/m)[1];
+
+  assert.match(thumbRule, /width:\s*min\(5\.5rem, calc\(5\.5rem \* \(var\(--playlist-slide-thumb-aspect-ratio, 16 \/ 9\)\)\)\);/);
+  assert.match(thumbRule, /aspect-ratio:\s*var\(--playlist-slide-thumb-aspect-ratio, 16 \/ 9\);/);
+  assert.match(thumbRule, /min-height:\s*0;/);
+  assert.match(thumbRule, /flex:\s*0 0 auto;/);
+  assert.match(imageRule, /object-fit:\s*contain;/);
+  assert.match(placeholderRule, /min-width:\s*0;/);
+  assert.match(placeholderRule, /min-height:\s*0;/);
+});
+
+test('standalone slide thumbnails are centered within their table column', () => {
+  const stylesheet = fs.readFileSync(path.join(__dirname, '..', 'src', 'web', 'public', 'css', 'theme-custom.css'), 'utf8');
+  const columnRule = stylesheet.match(/^td\[data-label="Thumbnail"\] > \.playlist-slide-thumb\s*\{([^}]+)\}/m)[1];
+  const cellRule = stylesheet.match(/^\.card \.table td\[data-label="Thumbnail"\]\s*\{([^}]+)\}/m)[1];
+
+  assert.match(columnRule, /margin-inline:\s*auto;/);
+  assert.match(cellRule, /padding-inline:\s*1\.5rem;/);
+});
+
+test('mobile responsive tables keep descriptive columns wide enough for phrases', () => {
+  const stylesheet = fs.readFileSync(path.join(__dirname, '..', 'src', 'web', 'public', 'css', 'theme-custom.css'), 'utf8');
+  const mobileRule = stylesheet.match(/@media \(max-width: 767\.98px\)\s*\{\s*\.table-responsive > table\.table > tbody > tr > td:is\(([\s\S]*?)\)\s*\{([^}]+)\}/);
+
+  assert.ok(mobileRule);
+  for (const label of ['Name', 'Title', 'Template', 'Description', 'Client', 'Current Screen', 'Current Slide', 'Slides']) {
+    assert.ok(mobileRule[1].includes('[data-label="' + label + '"]'));
+  }
+  assert.match(mobileRule[2], /min-width:\s*14rem;/);
+  assert.match(mobileRule[2], /overflow-wrap:\s*break-word;/);
+});
+
 test('table pagination cards skip the minimum height for short content', () => {
   const cardStyle = {
     properties: {},