From 37c7486cc095aab42c9fc830fa11c98ca08105ee Mon Sep 17 00:00:00 2001
From: wasrusgen <vasrusgen@gmail.com>
Date: Sat, 30 May 2026 23:56:00 +0300
Subject: [PATCH] crm: screen mockup table full-width + horizontal scroll
 (nowrap cells, no 640px cap)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 Mokap/crm.html | 4 ++--
 docs/crm.html  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/Mokap/crm.html b/Mokap/crm.html
index f6f8022..c8f9fd8 100644
--- a/Mokap/crm.html
+++ b/Mokap/crm.html
@@ -392,11 +392,11 @@ async function designScreen(module,idx){
   }catch(e){box.innerHTML=`<div style="color:#DC2626">${e.message}</div>`}
 }
 function renderScreen(s){
-  const frame=inner=>`<div style="border:1.5px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;max-width:640px"><div style="background:#0F0F1A;padding:8px 14px;display:flex;align-items:center;gap:8px"><span style="display:flex;gap:5px"><span style="width:9px;height:9px;border-radius:50%;background:#FF5F57"></span><span style="width:9px;height:9px;border-radius:50%;background:#FEBC2E"></span><span style="width:9px;height:9px;border-radius:50%;background:#28C840"></span></span><span style="color:rgba(255,255,255,.6);font-size:11px;margin-left:6px">${esc(s.title)}</span></div><div style="padding:16px">${inner}</div></div>`;
+  const frame=inner=>`<div style="border:1.5px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;width:100%"><div style="background:#0F0F1A;padding:8px 14px;display:flex;align-items:center;gap:8px"><span style="display:flex;gap:5px"><span style="width:9px;height:9px;border-radius:50%;background:#FF5F57"></span><span style="width:9px;height:9px;border-radius:50%;background:#FEBC2E"></span><span style="width:9px;height:9px;border-radius:50%;background:#28C840"></span></span><span style="color:rgba(255,255,255,.6);font-size:11px;margin-left:6px">${esc(s.title)}</span></div><div style="padding:16px">${inner}</div></div>`;
   const acts=`<div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:12px">${(s.actions||[]).map((a,i)=>`<span style="font-size:12px;font-weight:600;padding:7px 13px;border-radius:8px;${i===0?'background:#047857;color:#fff':'background:#F1F5F9;color:#475569'}">${esc(a)}</span>`).join("")}</div>`;
   let inner="";
   if(s.type==="list"){
-    inner=`<table style="width:100%;border-collapse:collapse;font-size:12px"><tr>${(s.columns||[]).map(c=>`<th style="text-align:left;padding:7px 9px;background:#F5F6F8;border-bottom:2px solid #E5E7EB;font-size:10px;text-transform:uppercase;color:#9ca3af;letter-spacing:.04em">${esc(c)}</th>`).join("")}</tr>${(s.rows||[]).map(r=>`<tr>${r.map(c=>`<td style="padding:8px 9px;border-bottom:1px solid #F1F5F9">${esc(c)}</td>`).join("")}</tr>`).join("")}</table>`+acts;
+    inner=`<div style="overflow-x:auto;-webkit-overflow-scrolling:touch"><table style="width:100%;border-collapse:collapse;font-size:12px;min-width:max-content"><tr>${(s.columns||[]).map(c=>`<th style="text-align:left;padding:7px 11px;background:#F5F6F8;border-bottom:2px solid #E5E7EB;font-size:10px;text-transform:uppercase;color:#9ca3af;letter-spacing:.04em;white-space:nowrap">${esc(c)}</th>`).join("")}</tr>${(s.rows||[]).map(r=>`<tr>${r.map(c=>`<td style="padding:8px 11px;border-bottom:1px solid #F1F5F9;white-space:nowrap">${esc(c)}</td>`).join("")}</tr>`).join("")}</table></div>`+acts;
   }else if(s.type==="kanban"){
     inner=`<div style="display:flex;gap:8px;overflow-x:auto">${(s.columns||[]).map(c=>`<div style="flex:1;min-width:120px;background:#F1F5F9;border-radius:8px;padding:8px"><div style="font-size:11px;font-weight:700;margin-bottom:6px">${esc(c)}</div><div style="background:#fff;border:1px solid #E5E7EB;border-radius:6px;padding:8px;font-size:11px">${(s.rows&&s.rows[0]&&s.rows[0][0])||'Карточка'}</div></div>`).join("")}</div>`+acts;
   }else if(s.type==="dashboard"){
diff --git a/docs/crm.html b/docs/crm.html
index f6f8022..c8f9fd8 100644
--- a/docs/crm.html
+++ b/docs/crm.html
@@ -392,11 +392,11 @@ async function designScreen(module,idx){
   }catch(e){box.innerHTML=`<div style="color:#DC2626">${e.message}</div>`}
 }
 function renderScreen(s){
-  const frame=inner=>`<div style="border:1.5px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;max-width:640px"><div style="background:#0F0F1A;padding:8px 14px;display:flex;align-items:center;gap:8px"><span style="display:flex;gap:5px"><span style="width:9px;height:9px;border-radius:50%;background:#FF5F57"></span><span style="width:9px;height:9px;border-radius:50%;background:#FEBC2E"></span><span style="width:9px;height:9px;border-radius:50%;background:#28C840"></span></span><span style="color:rgba(255,255,255,.6);font-size:11px;margin-left:6px">${esc(s.title)}</span></div><div style="padding:16px">${inner}</div></div>`;
+  const frame=inner=>`<div style="border:1.5px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;width:100%"><div style="background:#0F0F1A;padding:8px 14px;display:flex;align-items:center;gap:8px"><span style="display:flex;gap:5px"><span style="width:9px;height:9px;border-radius:50%;background:#FF5F57"></span><span style="width:9px;height:9px;border-radius:50%;background:#FEBC2E"></span><span style="width:9px;height:9px;border-radius:50%;background:#28C840"></span></span><span style="color:rgba(255,255,255,.6);font-size:11px;margin-left:6px">${esc(s.title)}</span></div><div style="padding:16px">${inner}</div></div>`;
   const acts=`<div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:12px">${(s.actions||[]).map((a,i)=>`<span style="font-size:12px;font-weight:600;padding:7px 13px;border-radius:8px;${i===0?'background:#047857;color:#fff':'background:#F1F5F9;color:#475569'}">${esc(a)}</span>`).join("")}</div>`;
   let inner="";
   if(s.type==="list"){
-    inner=`<table style="width:100%;border-collapse:collapse;font-size:12px"><tr>${(s.columns||[]).map(c=>`<th style="text-align:left;padding:7px 9px;background:#F5F6F8;border-bottom:2px solid #E5E7EB;font-size:10px;text-transform:uppercase;color:#9ca3af;letter-spacing:.04em">${esc(c)}</th>`).join("")}</tr>${(s.rows||[]).map(r=>`<tr>${r.map(c=>`<td style="padding:8px 9px;border-bottom:1px solid #F1F5F9">${esc(c)}</td>`).join("")}</tr>`).join("")}</table>`+acts;
+    inner=`<div style="overflow-x:auto;-webkit-overflow-scrolling:touch"><table style="width:100%;border-collapse:collapse;font-size:12px;min-width:max-content"><tr>${(s.columns||[]).map(c=>`<th style="text-align:left;padding:7px 11px;background:#F5F6F8;border-bottom:2px solid #E5E7EB;font-size:10px;text-transform:uppercase;color:#9ca3af;letter-spacing:.04em;white-space:nowrap">${esc(c)}</th>`).join("")}</tr>${(s.rows||[]).map(r=>`<tr>${r.map(c=>`<td style="padding:8px 11px;border-bottom:1px solid #F1F5F9;white-space:nowrap">${esc(c)}</td>`).join("")}</tr>`).join("")}</table></div>`+acts;
   }else if(s.type==="kanban"){
     inner=`<div style="display:flex;gap:8px;overflow-x:auto">${(s.columns||[]).map(c=>`<div style="flex:1;min-width:120px;background:#F1F5F9;border-radius:8px;padding:8px"><div style="font-size:11px;font-weight:700;margin-bottom:6px">${esc(c)}</div><div style="background:#fff;border:1px solid #E5E7EB;border-radius:6px;padding:8px;font-size:11px">${(s.rows&&s.rows[0]&&s.rows[0][0])||'Карточка'}</div></div>`).join("")}</div>`+acts;
   }else if(s.type==="dashboard"){