MailSend/test/admin-responsive-style.test.js

import assert from 'node:assert/strict';
import { readFileSync } from 'node:fs';
import test from 'node:test';

const styles = readFileSync(new URL('../src/frontend/styles.css', import.meta.url), 'utf8');

test('admin layout uses component constraints instead of hiding page overflow', () => {
  const bodyRule = styles.match(/(?:^|\n)body\s*\{([^}]*)\}/)?.[1] || '';
  assert.doesNotMatch(bodyRule, /overflow-x\s*:\s*(?:hidden|clip)/);
  assert.match(styles, /\.admin-main-layout\s*\{[^}]*max-width:\s*100%[^}]*min-width:\s*0/s);
  assert.match(styles, /\.admin-center-tabs[^{}]*\{[^}]*max-width:\s*100%[^}]*min-width:\s*0/s);
});

test('admin route focus and tablet header states remain visible and bounded', () => {
  assert.match(styles, /\.admin-content:focus\s*\{[^}]*outline:\s*3px\s+solid/s);
  assert.match(styles, /@media\s*\(max-width:\s*900px\)[\s\S]*?\.environment-status__label\s*\{\s*display:\s*none;/);
  assert.match(styles, /\.user-button__name\s*\{[^}]*text-overflow:\s*ellipsis[^}]*white-space:\s*nowrap/s);
});