@jjlmoya/utils-hardware 1.17.0 → 1.19.0

package/src/tests/no_en_dash.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest';
+import fs from 'node:fs';
+import path from 'node:path';
+
+function getFiles(dir: string): string[] {
+  const results: string[] = [];
+  if (!fs.existsSync(dir)) {
+    return results;
+  }
+  const list = fs.readdirSync(dir);
+  for (const file of list) {
+    const fullPath = path.join(dir, file);
+    const stat = fs.statSync(fullPath);
+    if (stat && stat.isDirectory()) {
+      if (file !== 'tests' && file !== 'node_modules' && file !== '.astro') {
+        results.push(...getFiles(fullPath));
+      }
+    } else {
+      results.push(fullPath);
+    }
+  }
+  return results;
+}
+
+function isContentFile(filePath: string): boolean {
+  return /\\i18n\\/.test(filePath) || filePath.endsWith('bibliography.ts');
+}
+
+const srcDir = path.join(process.cwd(), 'src');
+const scriptsDir = path.join(process.cwd(), 'scripts');
+const filesToTest = [
+  ...getFiles(srcDir).filter(isContentFile),
+  ...getFiles(scriptsDir).filter(isContentFile),
+];
+
+const aiTypographyGarbage = [
+  '\u2013',
+  '\u2014',
+  '\u2026',
+  '\u201C',
+  '\u201D',
+  '\u2018',
+  '\u2019',
+  '\u00AB',
+  '\u00BB',
+  '\u200B',
+  '\u201E',
+];
+
+describe('Typography Garbage Character Validation', () => {
+  filesToTest.forEach((filePath) => {
+    const relativePath = path.relative(process.cwd(), filePath);
+    it(`should not contain typography garbage characters in ${relativePath}`, () => {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      const hasAiPatterns = aiTypographyGarbage.some(char => content.includes(char));
+      expect(hasAiPatterns).toBe(false);
+    });
+
+    it(`should not contain space before colon in ${relativePath}`, () => {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      const spaceBeforeColon = / : /.test(content);
+      expect(spaceBeforeColon).toBe(false);
+    });
+
+    it(`should not contain double hyphen in ${relativePath}`, () => {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      expect(content).not.toContain('--');
+    });
+  });
+});

package/src/tests/pagespeed_best_practices.test.ts

@@ -0,0 +1,198 @@
+import { describe, expect, it } from 'vitest';
+import { readdirSync, readFileSync } from 'fs';
+import { join, relative } from 'path';
+import { ALL_TOOLS } from '../tools';
+import type { SEOSection, ToolLocaleContent } from '../types';
+
+const srcDir = join(process.cwd(), 'src');
+const toolDir = join(srcDir, 'tool');
+const geometryReads = [
+  'offsetWidth',
+  'offsetHeight',
+  'offsetTop',
+  'offsetLeft',
+  'clientWidth',
+  'clientHeight',
+  'clientTop',
+  'clientLeft',
+  'scrollWidth',
+  'scrollHeight',
+  'scrollTop',
+  'scrollLeft',
+  'getBoundingClientRect',
+  'getClientRects',
+  'computedStyle',
+  'getComputedStyle',
+];
+const domWrites = [
+  '.style.',
+  '.classList.add',
+  '.classList.remove',
+  '.classList.toggle',
+  '.appendChild',
+  '.insertBefore',
+  '.prepend',
+  '.append',
+  '.remove',
+  '.innerHTML',
+  '.textContent',
+  '.setAttribute',
+];
+
+function findFiles(dir: string, extensions: string[]): string[] {
+  const files: string[] = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) files.push(...findFiles(fullPath, extensions));
+    else if (extensions.some((extension) => entry.name.endsWith(extension))) files.push(fullPath);
+  }
+  return files;
+}
+
+function relativePath(file: string): string {
+  return relative(process.cwd(), file).replace(/\\/g, '/');
+}
+
+function findFormControls(content: string, tagName: 'input' | 'select'): RegExpMatchArray[] {
+  return Array.from(content.matchAll(new RegExp(`<${tagName}\\b[^>]*>`, 'gi')));
+}
+
+function attrValue(tag: string, attr: string): string | null {
+  const match = tag.match(new RegExp(`\\b${attr}\\s*=\\s*(?:"([^"]+)"|'([^']+)'|\\{([^}]+)\\})`, 'i'));
+  return match?.[1] ?? match?.[2] ?? match?.[3] ?? null;
+}
+
+function booleanAttr(tag: string, attr: string): boolean {
+  return new RegExp(`\\b${attr}\\b`, 'i').test(tag);
+}
+
+function controlStartIndex(content: string, tag: RegExpMatchArray): number {
+  return tag.index ?? content.indexOf(tag[0]);
+}
+
+function hasWrappingLabel(content: string, tag: RegExpMatchArray): boolean {
+  const index = controlStartIndex(content, tag);
+  const before = content.slice(0, index);
+  const labelOpen = before.lastIndexOf('<label');
+  const labelClose = before.lastIndexOf('</label>');
+  const nextLabelClose = content.indexOf('</label>', index + tag[0].length);
+  return labelOpen > labelClose && nextLabelClose !== -1;
+}
+
+function hasAccessibleName(content: string, tag: RegExpMatchArray): boolean {
+  const source = tag[0];
+  if (attrValue(source, 'aria-label')) return true;
+  if (attrValue(source, 'aria-labelledby')) return true;
+  const id = attrValue(source, 'id');
+  if (id && hasExplicitLabel(content, id)) return true;
+  return hasWrappingLabel(content, tag);
+}
+
+function isVisuallyHiddenFileInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  const attributes = `${attrValue(tag, 'style') ?? ''} ${attrValue(tag, 'class') ?? ''}`.toLowerCase();
+  const hiddenPatterns = ['display:none', 'display: none', 'file-input'];
+  return type === 'file' && hiddenPatterns.some((pattern) => attributes.includes(pattern));
+}
+
+function isIgnoredInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  return ['hidden', 'button', 'submit', 'reset'].includes(type) || booleanAttr(tag, 'aria-hidden') || isVisuallyHiddenFileInput(tag);
+}
+
+function controlFailures(content: string, tagName: 'input' | 'select'): string[] {
+  return findFormControls(content, tagName)
+    .filter((tag) => tagName !== 'input' || !isIgnoredInput(tag[0]))
+    .filter((tag) => !hasAccessibleName(content, tag))
+    .map((tag) => tag[0]);
+}
+
+function explicitLabelMessage(tagName: string, path: string, failures: string[]): string {
+  return `${tagName} controls without label, wrapping label, aria-label or aria-labelledby in ${path}:\n${failures.join('\n')}`;
+}
+
+function hasExplicitLabel(content: string, id: string): boolean {
+  const escapedId = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return (
+    new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*["']${escapedId}["'][^>]*>`, 'i').test(content)
+    || new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*\\{${escapedId}\\}[^>]*>`, 'i').test(content)
+  );
+}
+
+function headingLevels(sections: SEOSection[]): number[] {
+  return sections
+    .filter((section) => section.type === 'title')
+    .map((section) => Number('level' in section ? section.level : 0))
+    .filter((level) => Number.isInteger(level) && level > 0);
+}
+
+function findHeadingLevelJumps(levels: number[]): string[] {
+  const failures: string[] = [];
+  levels.forEach((level, index) => {
+    const previous = index === 0 ? 1 : levels[index - 1];
+    if (previous && level > previous + 1) {
+      failures.push(`h${previous} -> h${level}`);
+    }
+  });
+  return failures;
+}
+
+function hasDomWriteBeforeGeometryRead(content: string): boolean {
+  const normalized = content.replace(/\s+/g, ' ');
+  return domWrites.some((write) => {
+    const writeIndex = normalized.indexOf(write);
+    if (writeIndex === -1) return false;
+    return geometryReads.some((read) => normalized.indexOf(read, writeIndex + write.length) !== -1);
+  });
+}
+
+describe('PageSpeed best-practice guards', () => {
+  const astroToolFiles = findFiles(toolDir, ['.astro']);
+  const scriptFiles = findFiles(toolDir, ['.astro', '.ts', '.js']);
+
+  astroToolFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} labels every input with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'input');
+
+      expect(failures, explicitLabelMessage('Input', displayPath, failures)).toEqual([]);
+    });
+
+    it(`${displayPath} labels every select with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'select');
+
+      expect(failures, explicitLabelMessage('Select', displayPath, failures)).toEqual([]);
+    });
+  });
+
+  ALL_TOOLS.forEach((tool) => {
+    Object.entries(tool.entry.i18n).forEach(([locale, loader]) => {
+      it(`${tool.entry.id}/${locale} keeps SEO headings sequential`, async () => {
+        if (!loader) return;
+        const content = (await loader()) as ToolLocaleContent;
+        const levels = headingLevels(content.seo);
+        const failures = findHeadingLevelJumps(levels);
+
+        expect(
+          failures,
+          `SEO headings in ${tool.entry.id}/${locale} skip levels: ${failures.join(', ')}`,
+        ).toEqual([]);
+      });
+    });
+  });
+
+  scriptFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} avoids static forced-reflow patterns`, () => {
+      const content = readFileSync(file, 'utf-8');
+      expect(
+        hasDomWriteBeforeGeometryRead(content),
+        `${displayPath} appears to read layout geometry after DOM/style mutations. Split writes and reads across frames or measure before mutating.`,
+      ).toBe(false);
+    });
+  });
+});

package/src/tests/script_density.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, it } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+
+type ScriptLocale = keyof typeof SCRIPT_RULES;
+
+const SCRIPT_RULES = {
+  ja: {
+    language: 'Japanese',
+    scriptName: 'kana/kanji',
+    scriptCharacters: /[\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Han}]/gu,
+    minScriptRatio: 0.45,
+  },
+  ko: {
+    language: 'Korean',
+    scriptName: 'hangul',
+    scriptCharacters: /\p{Script=Hangul}/gu,
+    minScriptRatio: 0.55,
+  },
+  ru: {
+    language: 'Russian',
+    scriptName: 'cyrillic',
+    scriptCharacters: /\p{Script=Cyrillic}/gu,
+    minScriptRatio: 0.65,
+  },
+  zh: {
+    language: 'Chinese',
+    scriptName: 'han',
+    scriptCharacters: /\p{Script=Han}/gu,
+    minScriptRatio: 0.45,
+  },
+} as const;
+
+const LETTERS = /\p{L}/gu;
+const TRANSLATABLE_KEYS = ['title', 'description', 'ui', 'seo', 'faq', 'howTo'] as const;
+
+function collectStrings(value: unknown): string[] {
+  if (typeof value === 'string') return [value];
+  if (!value || typeof value !== 'object') return [];
+  if (Array.isArray(value)) return value.flatMap(collectStrings);
+  return Object.values(value).flatMap(collectStrings);
+}
+
+function normalizeText(value: unknown): string {
+  return collectStrings(value).join(' ').normalize('NFC');
+}
+
+function translatableContent(content: Record<string, unknown>) {
+  return TRANSLATABLE_KEYS.map((key) => content[key]);
+}
+
+function letterCount(text: string): number {
+  return text.match(LETTERS)?.length ?? 0;
+}
+
+function scriptCount(text: string, locale: ScriptLocale): number {
+  return text.match(SCRIPT_RULES[locale].scriptCharacters)?.length ?? 0;
+}
+
+function scriptRatio(text: string, locale: ScriptLocale): number {
+  const letters = letterCount(text);
+  if (letters === 0) return 0;
+  return scriptCount(text, locale) / letters;
+}
+
+describe('Native script density validation', () => {
+  ALL_TOOLS.forEach((tool) => {
+    describe(`Tool: ${tool.entry.id}`, () => {
+      Object.keys(SCRIPT_RULES).forEach((locale) => {
+        it(`${locale} keeps most translated text in its native script`, async () => {
+          const typedLocale = locale as ScriptLocale;
+          const loader = tool.entry.i18n[typedLocale];
+          if (!loader) return;
+
+          const content = await loader();
+          const rule = SCRIPT_RULES[typedLocale];
+          const text = normalizeText(translatableContent(content as Record<string, unknown>));
+          const letters = letterCount(text);
+          const matches = scriptCount(text, typedLocale);
+          const ratio = scriptRatio(text, typedLocale);
+
+          expect(
+            ratio,
+            [
+              `Possible broken translation detected in ${tool.entry.id}/${typedLocale} (${rule.language}).`,
+              `The text has ${matches} ${rule.scriptName} characters out of ${letters} analyzed letters (${(ratio * 100).toFixed(1)}%).`,
+              `Most translatable content should be written in ${rule.scriptName} script.`,
+              'Non-translatable fields such as slug, bibliography, and schemas are ignored to avoid false positives.',
+            ].join(' '),
+          ).toBeGreaterThanOrEqual(rule.minScriptRatio);
+        });
+      });
+    });
+  });
+});

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { hardwareCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 9 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(9);
+    it('should have 10 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(10);
     });
 
     it('hardwareCategory should be defined', () => {

package/src/tool/batteryHealthEstimator/component.astro

@@ -37,7 +37,7 @@ const S = JSON.stringify({
         <div class="bh-sliders">
           <div class="bh-slider-group">
             <div class="bh-slider-header">
-              <label class="bh-slider-label">{t.voltageLabel}</label>
+              <label for="bh-v" class="bh-slider-label">{t.voltageLabel}</label>
               <span id="bh-v-val" class="bh-slider-val">3.70V</span>
             </div>
             <input type="range" id="bh-v" class="bh-slider" min="3.0" max="4.2" step="0.01" value="3.70" />
@@ -46,7 +46,7 @@ const S = JSON.stringify({
 
           <div class="bh-slider-group">
             <div class="bh-slider-header">
-              <label class="bh-slider-label">{t.cyclesLabel}</label>
+              <label for="bh-c" class="bh-slider-label">{t.cyclesLabel}</label>
               <span id="bh-c-val" class="bh-slider-val">50</span>
             </div>
             <input type="range" id="bh-c" class="bh-slider" min="0" max="1000" step="1" value="50" />
@@ -54,7 +54,7 @@ const S = JSON.stringify({
 
           <div class="bh-slider-group">
             <div class="bh-slider-header">
-              <label class="bh-slider-label">{t.tempLabel}</label>
+              <label for="bh-t" class="bh-slider-label">{t.tempLabel}</label>
               <span id="bh-t-val" class="bh-slider-val">25°C</span>
             </div>
             <input type="range" id="bh-t" class="bh-slider" min="0" max="60" step="1" value="25" />

package/src/tool/batteryHealthEstimator/i18n/fr.ts

@@ -93,7 +93,7 @@ export const content: ToolLocaleContent<EstimadorSaludBateriaUI> = {
   schemas: [faqSchema, howToSchema, appSchema],
   bibliography,
   seo: [
-    { type: 'title', text: 'La chimie du temps : pourquoi les batteries lithium meurent', level: 2 },
+    { type: 'title', text: 'La chimie du temps: pourquoi les batteries lithium meurent', level: 2 },
     {
       type: 'paragraph',
       html: "Une batterie lithium-ion n'est pas une boîte d'énergie statique, mais un écosystème chimique dynamique en dégradation constante depuis sa fabrication. Chaque cycle de charge et décharge, chaque variation de température et chaque minute à des tensions extrêmes contribue à la formation de sous-produits qui entravent le flux d'ions.",
@@ -103,7 +103,7 @@ export const content: ToolLocaleContent<EstimadorSaludBateriaUI> = {
       type: 'paragraph',
       html: "<strong>Couche SEI :</strong> l'interface électrolyte solide croît avec le temps, consomme du lithium actif et augmente la résistance interne. <strong>Oxydation de l'électrolyte :</strong> des tensions supérieures à 4,1V accélèrent l'oxydation et peuvent gonfler la batterie. <strong>Lithium Plating :</strong> charger à basse température dépose du lithium sous forme métallique, créant des dendrites qui peuvent percer le séparateur.",
     },
-    { type: 'title', text: "Le mythe des 100% : pourquoi charger toute la nuit est une erreur", level: 3 },
+    { type: 'title', text: "Le mythe des 100%: pourquoi charger toute la nuit est une erreur", level: 3 },
     {
       type: 'paragraph',
       html: "Pour un ion lithium, être à 100% de charge (4,2V) est un état de haute tension. Les recherches montrent que la durée de vie double ou triple si l'on maintient l'appareil entre <strong>20% et 80%</strong>. De plus, pour chaque hausse de 10°C au-dessus de 25°C, la vitesse de dégradation chimique double approximativement.",
@@ -111,7 +111,7 @@ export const content: ToolLocaleContent<EstimadorSaludBateriaUI> = {
     { type: 'title', text: 'Protocole de survie énergétique', level: 3 },
     {
       type: 'paragraph',
-      html: "Ne chargez jamais une batterie en dessous de 0°C : le lithium se dépose sur l'anode, causant des dommages permanents. La charge rapide génère de la chaleur localisée et du stress mécanique ; utilisez-la uniquement en cas de stricte nécessité. Pour un stockage prolongé, conservez la batterie à 50% dans un endroit frais.",
+      html: "Ne chargez jamais une batterie en dessous de 0°C: le lithium se dépose sur l'anode, causant des dommages permanents. La charge rapide génère de la chaleur localisée et du stress mécanique ; utilisez-la uniquement en cas de stricte nécessité. Pour un stockage prolongé, conservez la batterie à 50% dans un endroit frais.",
     },
   ],
   ui: {
@@ -122,7 +122,7 @@ export const content: ToolLocaleContent<EstimadorSaludBateriaUI> = {
     voltageLabel: 'Tension Actuelle',
     cyclesLabel: 'Cycles de Charge',
     tempLabel: 'Température',
-    voltageHint: 'Plage nominale : 3,0V (vide) à 4,2V (plein).',
+    voltageHint: 'Plage nominale: 3,0V (vide) à 4,2V (plein).',
     labelUsefulLife: 'Durée de Vie',
     yearsPrefix: 'Est.',
     yearsSuffix: 'ans',

package/src/tool/batteryHealthEstimator/i18n/pl.ts

@@ -106,7 +106,7 @@ export const content: ToolLocaleContent<EstimadorSaludBateriaUI> = {
     { type: 'title', text: 'Mit 100%: dlaczego ładowanie przez noc to błąd', level: 3 },
     {
       type: 'paragraph',
-      html: 'Dla jonu litu stan naładowania 100% (4.2V) jest stanem wysokiego stresu. Badania pokazują, że żywotność cyklu wzrasta dwu- lub trzykrotnie przy utrzymywaniu urządzenia w zakresie <strong>20% – 80%</strong>. Ponadto na każde 10°C powyżej 25°C tempo degradacji chemicznej wzrasta około dwukrotnie.',
+      html: 'Dla jonu litu stan naładowania 100% (4.2V) jest stanem wysokiego stresu. Badania pokazują, że żywotność cyklu wzrasta dwu- lub trzykrotnie przy utrzymywaniu urządzenia w zakresie <strong>20% - 80%</strong>. Ponadto na każde 10°C powyżej 25°C tempo degradacji chemicznej wzrasta około dwukrotnie.',
     },
     { type: 'title', text: 'Protokół przetrwania energii', level: 3 },
     {

package/src/tool/colorAccuracyTest/color-accuracy-test.css

@@ -20,6 +20,13 @@
   margin: 0 auto;
   padding: 1rem;
   color: var(--sc-text);
+  overflow-x: clip;
+}
+
+.sc-wrapper *,
+.sc-wrapper *::before,
+.sc-wrapper *::after {
+  box-sizing: border-box;
 }
 
 .theme-dark .sc-wrapper {
@@ -44,6 +51,7 @@
   transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
   position: relative;
   overflow: hidden;
+  max-width: 100%;
 }
 
 .sc-dashboard::before {
@@ -68,13 +76,18 @@
 }
 
 @media (max-width: 768px) {
+  .sc-wrapper {
+    padding: 0;
+  }
+
   .sc-grid {
     grid-template-columns: 1fr;
-    gap: 2rem;
+    gap: 1.25rem;
   }
 
   .sc-dashboard {
-    padding: 1.5rem;
+    border-radius: 0.875rem;
+    padding: 1rem;
   }
 }
 
@@ -160,6 +173,7 @@
   padding: 0.5rem;
   border-radius: 0.875rem;
   border: 1px solid var(--sc-border);
+  min-width: 0;
 }
 
 .sc-gamut-btn {
@@ -173,6 +187,7 @@
   background: transparent;
   color: var(--sc-text-muted);
   position: relative;
+  min-width: 0;
 }
 
 .sc-gamut-btn.sc-gamut-active {
@@ -220,6 +235,7 @@
   display: flex;
   gap: 1rem;
   animation: fade-in-up 0.8s ease-out 0.4s both;
+  width: 100%;
 }
 
 .sc-btn {
@@ -236,6 +252,7 @@
   gap: 0.5rem;
   position: relative;
   overflow: hidden;
+  min-width: 0;
 }
 
 .sc-btn::before {
@@ -292,6 +309,7 @@
   color: var(--sc-text-light);
   margin-top: 1.5rem;
   animation: fade-in-up 0.8s ease-out 0.5s both;
+  flex-wrap: wrap;
 }
 
 .sc-shortcut {
@@ -315,12 +333,12 @@
   justify-content: center;
   align-items: center;
   animation: fade-in-right 0.8s ease-out 0.3s both;
+  min-width: 0;
 }
 
 .sc-preview-canvas {
   width: 100%;
   aspect-ratio: 1;
-  max-width: 350px;
   border-radius: 1rem;
   background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 50%, #1e1b4b 100%);
   border: 2px solid var(--sc-border);
@@ -331,6 +349,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  max-width: min(350px, 100%);
 }
 
 .sc-preview-gradient {
@@ -362,6 +381,8 @@
   letter-spacing: 0.05em;
   text-transform: uppercase;
   z-index: 10;
+  width: calc(100% - 2rem);
+  text-align: center;
 }
 
 #test-overlay {
@@ -402,6 +423,8 @@
   z-index: 1001;
   backdrop-filter: blur(10px);
   animation: slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  max-height: 55vh;
+  overflow-y: auto;
 }
 
 @media (min-width: 768px) {
@@ -419,11 +442,24 @@
 @keyframes slide-up {
   from {
     opacity: 0;
-    transform: translateX(-50%) translateY(20px);
+    transform: translateY(20px);
   }
   to {
     opacity: 1;
-    transform: translateX(-50%) translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@media (min-width: 768px) {
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
   }
 }
 
@@ -675,6 +711,7 @@
   display: flex;
   gap: 0.5rem;
   margin-top: 0.75rem;
+  width: 100%;
 }
 
 @media (min-width: 768px) {
@@ -695,6 +732,7 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
+  min-width: 0;
 }
 
 @media (min-width: 768px) {
@@ -726,3 +764,78 @@
 .sc-action-secondary:hover {
   background: rgba(255, 255, 255, 0.15);
 }
+
+@media (max-width: 640px) {
+  .sc-content {
+    min-width: 0;
+  }
+
+  .sc-gamut-toggle {
+    gap: 0.375rem;
+    padding: 0.375rem;
+  }
+
+  .sc-gamut-btn {
+    padding: 0.65rem 0.5rem;
+    font-size: 0.8rem;
+  }
+
+  .sc-buttons {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .sc-btn {
+    width: 100%;
+    padding: 0.875rem 1rem;
+  }
+
+  .sc-shortcuts {
+    gap: 0.5rem;
+    font-size: 0.75rem;
+  }
+
+  .sc-shortcuts > span {
+    display: none;
+  }
+
+  .sc-shortcut {
+    flex: 1 1 8rem;
+  }
+
+  .sc-preview-canvas {
+    max-width: min(18rem, 100%);
+  }
+
+  .sc-preview-label {
+    bottom: 0.75rem;
+    font-size: 0.7rem;
+  }
+
+  .sc-controls {
+    padding: 3.75rem 0.75rem 0.75rem;
+    max-height: 70vh;
+  }
+
+  .sc-close-test {
+    top: 0.75rem;
+    right: 0.75rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.6rem;
+  }
+
+  .sc-test-description {
+    margin-top: 0;
+    font-size: 0.82rem;
+  }
+
+  .sc-test-actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .sc-action-btn {
+    padding: 0.7rem 0.5rem;
+  }
+}