From 86d66f8a4a95ec59d7e5b7b7e36d774c4fd9710f Mon Sep 17 00:00:00 2001 From: Federico Viscioletti Date: Wed, 3 Jun 2026 10:18:40 +0000 Subject: [PATCH 1/2] fix: prevent mobile textarea auto-zoom on tap Increase textarea font-size to 16px on mobile viewports (<980px) to prevent iOS Safari and other mobile browsers from triggering automatic zoom when user taps the editor. --- dist/styles.min.css | 2 +- ink-app.html | 2 +- .../changes/fix-mobile-textarea-zoom/proposal.md | 14 ++++++++++++++ .../specs/mobile-support/spec.md | 13 +++++++++++++ openspec/changes/fix-mobile-textarea-zoom/tasks.md | 3 +++ src/styles.scss | 3 +++ 6 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 openspec/changes/fix-mobile-textarea-zoom/proposal.md create mode 100644 openspec/changes/fix-mobile-textarea-zoom/specs/mobile-support/spec.md create mode 100644 openspec/changes/fix-mobile-textarea-zoom/tasks.md diff --git a/dist/styles.min.css b/dist/styles.min.css index 50dc0c9..859fef4 100644 --- a/dist/styles.min.css +++ b/dist/styles.min.css @@ -1 +1 @@ -:root{--bg: #0b0f14;--panel: #0f1620;--panel2: #0c121a;--border: rgba(255, 255, 255, 0.10);--muted: rgba(255, 255, 255, 0.70);--text: rgba(255, 255, 255, 0.92);--accent: #5eead4;--danger: #fb7185;--ok: #34d399;--warn: #fbbf24;--shadow: 0 10px 30px rgba(0,0,0,.35);--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";--radius: 14px;--body-bg: radial-gradient(900px 600px at 10% 0%, rgba(94, 234, 212, 0.15), transparent 60%), radial-gradient(900px 600px at 90% 0%, rgba(251, 191, 36, 0.10), transparent 60%), var(--bg)}:root[data-theme=classic]{--bg: #f5f5f5;--panel: #ffffff;--panel2: #eeeeee;--border: rgba(0, 0, 0, 0.12);--muted: rgba(0, 0, 0, 0.55);--text: rgba(0, 0, 0, 0.88);--accent: #2c6fad;--danger: #d9534f;--ok: #2e7d32;--warn: #e65100;--shadow: 0 10px 30px rgba(0,0,0,.10);--body-bg: var(--bg)}:root[data-theme=cobalt]{--bg: #001f3d;--panel: #002b52;--panel2: #002040;--border: rgba(255, 255, 255, 0.12);--muted: rgba(255, 255, 255, 0.60);--text: #e8f4fd;--accent: #ffd700;--danger: #ff6b6b;--ok: #32d48a;--warn: #ffba08;--shadow: 0 10px 30px rgba(0,0,0,.50);--body-bg: radial-gradient(800px 500px at 20% 0%, rgba(0, 120, 212, 0.20), transparent 60%), radial-gradient(800px 500px at 80% 100%, rgba(255, 215, 0, 0.08), transparent 60%), var(--bg)}:root[data-theme=monokai]{--bg: #272822;--panel: #3e3d32;--panel2: #2d2c27;--border: rgba(255, 255, 255, 0.10);--muted: rgba(248, 248, 242, 0.55);--text: #f8f8f2;--accent: #a6e22e;--danger: #f92672;--ok: #a6e22e;--warn: #e6db74;--shadow: 0 10px 30px rgba(0,0,0,.45);--body-bg: radial-gradient(700px 400px at 0% 0%, rgba(166, 226, 46, 0.08), transparent 60%), radial-gradient(700px 400px at 100% 100%, rgba(249, 38, 114, 0.08), transparent 60%), var(--bg)}:root[data-theme=office]{--bg: #f0f0f0;--panel: #ffffff;--panel2: #f7f7f7;--border: rgba(0, 0, 0, 0.12);--muted: rgba(0, 0, 0, 0.50);--text: rgba(0, 0, 0, 0.85);--accent: #0078d4;--danger: #c4314b;--ok: #107c10;--warn: #c19c00;--shadow: 0 10px 30px rgba(0,0,0,.08);--body-bg: var(--bg)}:root[data-theme=twilight]{--bg: #141414;--panel: #1e1e1e;--panel2: #191919;--border: rgba(255, 255, 255, 0.10);--muted: rgba(247, 247, 247, 0.55);--text: #f5f5f5;--accent: #d4a96a;--danger: #cf6679;--ok: #7cbf8e;--warn: #c9a84c;--shadow: 0 10px 30px rgba(0,0,0,.50);--body-bg: radial-gradient(700px 400px at 15% 0%, rgba(212, 169, 106, 0.10), transparent 60%), radial-gradient(700px 400px at 85% 100%, rgba(124, 191, 142, 0.07), transparent 60%), var(--bg)}:root[data-theme=xcode]{--bg: #f9f9f9;--panel: #ffffff;--panel2: #f2f2f7;--border: rgba(0, 0, 0, 0.12);--muted: rgba(0, 0, 0, 0.50);--text: rgba(0, 0, 0, 0.88);--accent: #0070c1;--danger: #b22222;--ok: #006400;--warn: #7d4700;--shadow: 0 10px 30px rgba(0,0,0,.08);--body-bg: var(--bg)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--sans);background:var(--body-bg);color:var(--text)}.app{height:100%;display:grid;grid-template-rows:auto 1fr;grid-template-columns:320px 1fr}.app.sidebar-collapsed{grid-template-columns:64px 1fr}.app>.menubar{grid-column:1/-1}.card{background:linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 80%),var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;min-height:0}.sidebar{display:flex;flex-direction:column;min-height:0;position:relative;border-radius:0}.sidebarToggle{display:inline-flex;margin:10px;top:10px;right:10px;z-index:2;padding:8px 10px;font-size:12px}.sidebarPanel{display:flex;flex-direction:column;min-height:0;height:100%}.sidebar.collapsed .sidebarPanel{display:none}.sidebar.collapsed{background:rgba(0,0,0,0);border-color:rgba(0,0,0,0);box-shadow:none}.sidebar.collapsed .sidebarToggle{display:flex;align-items:center;justify-content:center;writing-mode:vertical-lr;text-orientation:upright;letter-spacing:1px;background:linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 80%),var(--panel);border:1px solid var(--border);color:var(--text)}.sidebar header{padding:14px 14px 10px;border-bottom:1px solid var(--border);display:block;align-items:center;gap:10px}.row{display:flex;gap:10px;align-items:center;margin-top:7px}.row.space{justify-content:space-between}.row .row{margin-top:0}#searchInput{margin-top:7px}.title{font-size:14px;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:10px}.pill{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:hsla(0,0%,100%,.04);color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pill.warning{border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.12);color:rgba(251,191,36,.95)}button{appearance:none;border:1px solid var(--border);background:hsla(0,0%,100%,.06);color:var(--text);padding:10px 12px;border-radius:12px;font-weight:650;cursor:pointer;transition:transform .05s ease,background .15s ease,border-color .15s ease;user-select:none;white-space:nowrap}button:hover{background:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.18)}button:active{transform:translateY(1px)}button.primary{border-color:rgba(94,234,212,.45);background:rgba(94,234,212,.14)}button.primary:hover{background:rgba(94,234,212,.2);border-color:rgba(94,234,212,.7)}button.ghost{background:rgba(0,0,0,0)}button:disabled{opacity:.55;cursor:not-allowed}.input{width:100%;border-radius:12px;border:1px solid var(--border);background:hsla(0,0%,100%,.05);color:var(--text);padding:10px 12px;outline:none;font-size:14px}.input::placeholder{color:hsla(0,0%,100%,.55)}@media(prefers-color-scheme: light){.input::placeholder{color:rgba(2,6,23,.4)}}.small{font-size:12px;color:var(--muted)}.treeWrap{padding:10px 10px 14px;overflow:auto;min-height:0}.tree{font-size:13px;line-height:1.35;padding:4px 0;user-select:none}.tree .node{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px;cursor:pointer;transition:background .12s ease;border:1px solid rgba(0,0,0,0)}.tree .node:hover{background:hsla(0,0%,100%,.06)}.tree .node.active{background:rgba(94,234,212,.14);background:rgba(94,234,212,.4)}.tree .indent{margin-left:14px}.icon{width:16px;height:16px;display:inline-block;vertical-align:middle;flex-shrink:0;color:inherit;pointer-events:none;opacity:.85}.node .name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node .meta{font-size:11px;color:var(--muted);flex:0 0 auto}.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;padding:0 2px 2px}.tag{font-size:11px;padding:3px 7px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:hsla(0,0%,100%,.04);cursor:pointer}.tag.active{border-color:rgba(94,234,212,.45);color:var(--text);background:rgba(94,234,212,.12)}.main{display:flex;flex-direction:column;min-height:0;border-radius:0}.main header{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;min-height:54px}.viewModePicker{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border);border-radius:999px;background:hsla(0,0%,100%,.04);flex:0 0 auto}.viewModeBtn{border:0;background:rgba(0,0,0,0);color:var(--muted);border-radius:999px;padding:6px 10px;font-size:12px;line-height:1;font-weight:700;white-space:nowrap}.viewModeBtn:hover{background:hsla(0,0%,100%,.06);color:var(--text)}.viewModeBtn.active{background:rgba(94,234,212,.16);color:var(--text);box-shadow:inset 0 0 0 1px rgba(94,234,212,.35)}.filename{font-weight:800;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55vw}.dirtyDot{width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 3px rgba(251,113,113,.18);display:none;flex:0 0 auto}.dirtyDot.show{display:inline-block}.status{margin-left:auto;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;min-width:220px;justify-content:flex-end}.status .badge{padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:hsla(0,0%,100%,.04);color:var(--muted);max-width:60ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status .badge.ok{border-color:rgba(52,211,153,.35);color:rgba(52,211,153,.95);background:rgba(52,211,153,.1)}.status .badge.warn{border-color:rgba(251,191,36,.35);color:rgba(251,191,36,.95);background:rgba(251,191,36,.1)}.status .badge.err{border-color:rgba(251,113,133,.4);color:rgba(251,113,133,.95);background:rgba(251,113,133,.1)}.split{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 1fr}.split.view-source,.split.view-preview{grid-template-columns:1fr}.split.view-source.with-cogito,.split.view-source.with-document-linter,.split.view-preview.with-cogito,.split.view-preview.with-document-linter{grid-template-columns:1fr 320px}.split.view-split.with-cogito,.split.view-split.with-document-linter{grid-template-columns:1fr 1fr 320px}.editorPane,.previewPane{min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column}.editorPane{border-right:1px solid var(--border);background:var(--panel2)}.split.view-source .editorPane{border-right:0}.split.view-preview .previewPane{border-left:0}.editorPane[hidden],.previewPane[hidden],.cogitoPanel[hidden],.documentLinterPanel[hidden]{display:none !important}textarea{width:100%;height:100%;resize:none;border:none;outline:none;padding:14px 14px 18px;font-family:var(--mono);font-size:14px;line-height:1.5;background:rgba(0,0,0,0);color:var(--text);overflow:auto;white-space:pre-wrap;word-break:break-word;tab-size:2}.preview{padding:14px 16px 18px;min-width:0;min-height:0;overflow-y:auto}.cogitoPanel{min-height:0;border-left:1px solid var(--border);background:var(--panel2);padding:12px;display:flex;flex-direction:column;gap:10px;overflow:auto}.cogitoPanel[hidden]{display:none}.documentLinterPanel{min-height:0;border-left:1px solid var(--border);background:var(--panel2);padding:12px;display:flex;flex-direction:column;gap:10px;overflow:auto}.documentLinterPanel[hidden]{display:none}.documentLinterHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:0;border:0;min-height:0}.documentLinterAutoRun{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);user-select:none}.documentLinterAutoRun input{margin:0}.documentLinterResults{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:12px}.documentLinterSummary{display:grid;gap:10px;margin-bottom:10px}.documentLinterSummaryBlock{border:1px solid var(--border);border-radius:12px;padding:10px;background:hsla(0,0%,100%,.03)}.documentLinterSummaryBlock h3{margin:0 0 8px;font-size:13px;font-weight:700}.documentLinterSummaryBlock ul,.documentLinterSummaryBlock ol{margin:0;padding-left:18px;display:grid;gap:6px}.documentLinterCategory{border:1px solid var(--border);border-radius:12px;padding:10px;background:hsla(0,0%,100%,.03);margin:0}.documentLinterCategoryHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border)}.documentLinterCategoryHeader h3{margin:0;font-size:13px;font-weight:600}.documentLinterScore{font-size:14px;font-weight:700;padding:2px 6px;border-radius:4px}.documentLinterSuggestions{display:flex;flex-direction:column;gap:4px}.documentLinterSuggestion{font-size:12px;line-height:1.4}.documentLinterLineButton{border:0;background:rgba(0,0,0,0);color:var(--accent);padding:0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.documentLinterLineButton:hover,.documentLinterLineButton:focus-visible{color:var(--text);outline:none}.documentLinterSectionAnalysis{display:grid;gap:10px;margin-top:2px;padding-top:8px}.documentLinterSectionAnalysis h3{margin:0;font-size:13px;font-weight:700}.documentLinterSectionList{display:grid;gap:10px}.documentLinterSectionCard{border:1px solid var(--border);border-radius:12px;padding:10px;background:hsla(0,0%,100%,.03);display:grid;gap:8px}.documentLinterSectionHeader{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding-bottom:8px;border-bottom:1px solid var(--border)}.documentLinterSectionHeader h4{margin:0;font-size:12px;font-weight:700}.documentLinterSectionHeader span{font-size:11px;color:var(--muted);white-space:nowrap}.documentLinterSectionNotes{display:grid;gap:4px}.cogitoHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:0;border:0;min-height:0}.cogitoModelPicker{display:flex;gap:4px}.cogitoModelBtn{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;font-size:11px;font-weight:600;border-radius:8px;opacity:.55}.cogitoModelBtn.active{opacity:1;border-color:rgba(94,234,212,.5);background:rgba(94,234,212,.14)}.cogitoQuestionList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.cogitoQuestionItem{border:1px solid var(--border);border-radius:12px;padding:10px;background:hsla(0,0%,100%,.03);display:flex;flex-direction:column;gap:8px}.cogitoQuestionText{margin:0;font-size:13px;line-height:1.4}.cogitoInsertBtn{align-self:flex-end;padding:6px 10px;font-size:12px;border-radius:10px}.preview :is(h1,h2,h3){line-height:1.25;margin:1em 0 .5em}.preview h1{font-size:1.6rem}.preview h2{font-size:1.35rem}.preview h3{font-size:1.15rem}.preview p{color:var(--text);opacity:.92}.preview a{color:var(--accent)}.preview code{font-family:var(--mono);font-size:.95em;padding:.15em .35em;border-radius:8px;background:hsla(0,0%,100%,.06);border:1px solid var(--border)}.preview pre{max-width:100%;padding:12px;border-radius:12px;background:rgba(94,234,212,.06);border:1px solid var(--border);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.preview pre code{padding:0;border:none;background:rgba(0,0,0,0)}.preview blockquote{border-left:4px solid rgba(94,234,212,.45);padding:8px 12px;margin:12px 0;background:rgba(94,234,212,.08);border-radius:10px;color:var(--muted)}.preview table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:12px;overflow:hidden}.preview th,.preview td{border-bottom:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top}.preview th{background:hsla(0,0%,100%,.05);font-weight:800}.menubar{display:flex;align-items:center;padding:0 8px;height:38px;border-radius:0;border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 80%),var(--panel);flex-shrink:0;overflow:visible}.menubar-spacer{flex:1 1 auto}.menu-action-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:4px 10px;border-radius:10px;font-size:12px}.menu-action-btn+.menu-action-btn{margin-left:8px}.menu-action-label{font-weight:700}.menu-action-btn[aria-expanded=true]{border-color:rgba(94,234,212,.6);background:rgba(94,234,212,.16)}.glyphicon{display:inline-flex;width:16px;justify-content:center;align-items:center;line-height:1;font-size:14px}.glyphicon-education::before{content:"🧠"}.menu-item{position:relative;display:flex;align-items:center;gap:4px;padding:6px 12px;cursor:pointer;border-radius:8px;transition:background .12s ease;user-select:none}.menu-item:hover,.menu-item:focus,.menu-item[aria-expanded=true]{background:hsla(0,0%,100%,.08);outline:none}.menu-text{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--text)}.menu-arrow{font-size:8px;color:var(--muted);margin-left:2px}.dropdown{position:absolute;top:100%;left:0;min-width:200px;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:4px 0;display:none;z-index:100;margin-top:2px}.menu-item[aria-expanded=true] .dropdown{display:block}.dropdown li{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;cursor:pointer;transition:background .08s ease}.dropdown li:hover,.dropdown li:focus{background:rgba(94,234,212,.12);outline:none}.dropdown li[role=separator]{height:1px;padding:0;margin:4px 8px;background:var(--border);cursor:default}.dropdown li[role=separator]:hover,.dropdown li[role=separator]:focus{background:var(--border)}.menu-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text)}.menu-label-text{min-width:0}.menu-shortcut{font-size:11px;color:var(--muted);margin-left:20px}.menu-theme-check{font-size:11px;color:var(--accent);margin-left:20px;opacity:0}.menu-theme-check.active{opacity:1}.submenu-parent{position:relative}.submenu-parent .dropdown.submenu{position:absolute;left:100%;top:0;margin-left:4px;display:none}.submenu-parent:hover>.dropdown.submenu{display:block}.submenu-parent>.menu-arrow{font-size:6px;margin-left:6px}.toast{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(0,0,0,.7);color:#fff;padding:10px 12px;border-radius:12px;border:1px solid hsla(0,0%,100%,.18);max-width:min(760px,100vw - 28px);box-shadow:0 14px 40px rgba(0,0,0,.35);display:none;z-index:1000;font-size:13px;backdrop-filter:blur(10px)}.toast.show{display:block}.toast .trow{display:flex;gap:10px;align-items:flex-start}.toast .trow .tmsg{flex:1 1 auto}.toast .trow button{padding:6px 8px;border-radius:10px;font-size:12px}.webmcpModal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;z-index:1050;opacity:0;pointer-events:none;visibility:hidden}.webmcpModal.show{opacity:1;pointer-events:auto;visibility:visible}.webmcpModalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.56);backdrop-filter:blur(8px)}.webmcpModalCard{position:relative;width:min(680px,100vw - 40px);max-height:calc(100vh - 40px);overflow:auto;padding:18px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 100%),var(--panel);box-shadow:var(--shadow)}.webmcpModalHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}#webmcpNoteForm{display:grid;gap:10px}#webmcpNoteForm textarea{min-height:160px;resize:vertical}.webmcpModalActions{justify-content:flex-end;margin-top:4px}@media(max-width: 980px){.app{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;height:100%}.app.sidebar-collapsed{grid-template-columns:1fr}.split,.split.view-source,.split.view-preview,.split.view-split.with-cogito,.split.view-split.with-document-linter,.split.view-source.with-cogito,.split.view-source.with-document-linter,.split.view-preview.with-cogito,.split.view-preview.with-document-linter{grid-template-columns:1fr}.editorPane{border-right:none;border-bottom:1px solid var(--border);min-height:40vh}.previewPane{min-height:40vh}.cogitoPanel{border-left:none;border-top:1px solid var(--border);min-height:30vh}.documentLinterPanel{border-left:none;border-top:1px solid var(--border);min-height:30vh}.filename{max-width:70vw}.sidebarToggle{position:static;margin:10px;width:calc(100% - 20px);height:auto;transform:none;writing-mode:horizontal-tb;text-orientation:mixed;letter-spacing:normal}.sidebar.collapsed .sidebarPanel{display:none}.sidebar.collapsed .sidebarToggle{display:flex;width:calc(100% - 20px);writing-mode:horizontal-tb;text-orientation:mixed;letter-spacing:normal}.sidebar.collapsed{height:auto;min-height:0}.webmcpModal{padding:12px;align-items:flex-end}.webmcpModalCard{width:100%;max-height:min(80vh,720px);border-radius:18px 18px 0 0}} \ No newline at end of file +:root{--bg: #0b0f14;--panel: #0f1620;--panel2: #0c121a;--border: rgba(255, 255, 255, 0.10);--muted: rgba(255, 255, 255, 0.70);--text: rgba(255, 255, 255, 0.92);--accent: #5eead4;--danger: #fb7185;--ok: #34d399;--warn: #fbbf24;--shadow: 0 10px 30px rgba(0,0,0,.35);--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";--radius: 14px;--body-bg: radial-gradient(900px 600px at 10% 0%, rgba(94, 234, 212, 0.15), transparent 60%), radial-gradient(900px 600px at 90% 0%, rgba(251, 191, 36, 0.10), transparent 60%), var(--bg)}:root[data-theme=classic]{--bg: #f5f5f5;--panel: #ffffff;--panel2: #eeeeee;--border: rgba(0, 0, 0, 0.12);--muted: rgba(0, 0, 0, 0.55);--text: rgba(0, 0, 0, 0.88);--accent: #2c6fad;--danger: #d9534f;--ok: #2e7d32;--warn: #e65100;--shadow: 0 10px 30px rgba(0,0,0,.10);--body-bg: var(--bg)}:root[data-theme=cobalt]{--bg: #001f3d;--panel: #002b52;--panel2: #002040;--border: rgba(255, 255, 255, 0.12);--muted: rgba(255, 255, 255, 0.60);--text: #e8f4fd;--accent: #ffd700;--danger: #ff6b6b;--ok: #32d48a;--warn: #ffba08;--shadow: 0 10px 30px rgba(0,0,0,.50);--body-bg: radial-gradient(800px 500px at 20% 0%, rgba(0, 120, 212, 0.20), transparent 60%), radial-gradient(800px 500px at 80% 100%, rgba(255, 215, 0, 0.08), transparent 60%), var(--bg)}:root[data-theme=monokai]{--bg: #272822;--panel: #3e3d32;--panel2: #2d2c27;--border: rgba(255, 255, 255, 0.10);--muted: rgba(248, 248, 242, 0.55);--text: #f8f8f2;--accent: #a6e22e;--danger: #f92672;--ok: #a6e22e;--warn: #e6db74;--shadow: 0 10px 30px rgba(0,0,0,.45);--body-bg: radial-gradient(700px 400px at 0% 0%, rgba(166, 226, 46, 0.08), transparent 60%), radial-gradient(700px 400px at 100% 100%, rgba(249, 38, 114, 0.08), transparent 60%), var(--bg)}:root[data-theme=office]{--bg: #f0f0f0;--panel: #ffffff;--panel2: #f7f7f7;--border: rgba(0, 0, 0, 0.12);--muted: rgba(0, 0, 0, 0.50);--text: rgba(0, 0, 0, 0.85);--accent: #0078d4;--danger: #c4314b;--ok: #107c10;--warn: #c19c00;--shadow: 0 10px 30px rgba(0,0,0,.08);--body-bg: var(--bg)}:root[data-theme=twilight]{--bg: #141414;--panel: #1e1e1e;--panel2: #191919;--border: rgba(255, 255, 255, 0.10);--muted: rgba(247, 247, 247, 0.55);--text: #f5f5f5;--accent: #d4a96a;--danger: #cf6679;--ok: #7cbf8e;--warn: #c9a84c;--shadow: 0 10px 30px rgba(0,0,0,.50);--body-bg: radial-gradient(700px 400px at 15% 0%, rgba(212, 169, 106, 0.10), transparent 60%), radial-gradient(700px 400px at 85% 100%, rgba(124, 191, 142, 0.07), transparent 60%), var(--bg)}:root[data-theme=xcode]{--bg: #f9f9f9;--panel: #ffffff;--panel2: #f2f2f7;--border: rgba(0, 0, 0, 0.12);--muted: rgba(0, 0, 0, 0.50);--text: rgba(0, 0, 0, 0.88);--accent: #0070c1;--danger: #b22222;--ok: #006400;--warn: #7d4700;--shadow: 0 10px 30px rgba(0,0,0,.08);--body-bg: var(--bg)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--sans);background:var(--body-bg);color:var(--text)}.app{height:100%;display:grid;grid-template-rows:auto 1fr;grid-template-columns:320px 1fr}.app.sidebar-collapsed{grid-template-columns:64px 1fr}.app>.menubar{grid-column:1/-1}.card{background:linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 80%),var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;min-height:0}.sidebar{display:flex;flex-direction:column;min-height:0;position:relative;border-radius:0}.sidebarToggle{display:inline-flex;margin:10px;top:10px;right:10px;z-index:2;padding:8px 10px;font-size:12px}.sidebarPanel{display:flex;flex-direction:column;min-height:0;height:100%}.sidebar.collapsed .sidebarPanel{display:none}.sidebar.collapsed{background:rgba(0,0,0,0);border-color:rgba(0,0,0,0);box-shadow:none}.sidebar.collapsed .sidebarToggle{display:flex;align-items:center;justify-content:center;writing-mode:vertical-lr;text-orientation:upright;letter-spacing:1px;background:linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 80%),var(--panel);border:1px solid var(--border);color:var(--text)}.sidebar header{padding:14px 14px 10px;border-bottom:1px solid var(--border);display:block;align-items:center;gap:10px}.row{display:flex;gap:10px;align-items:center;margin-top:7px}.row.space{justify-content:space-between}.row .row{margin-top:0}#searchInput{margin-top:7px}.title{font-size:14px;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:10px}.pill{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:hsla(0,0%,100%,.04);color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pill.warning{border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.12);color:rgba(251,191,36,.95)}button{appearance:none;border:1px solid var(--border);background:hsla(0,0%,100%,.06);color:var(--text);padding:10px 12px;border-radius:12px;font-weight:650;cursor:pointer;transition:transform .05s ease,background .15s ease,border-color .15s ease;user-select:none;white-space:nowrap}button:hover{background:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.18)}button:active{transform:translateY(1px)}button.primary{border-color:rgba(94,234,212,.45);background:rgba(94,234,212,.14)}button.primary:hover{background:rgba(94,234,212,.2);border-color:rgba(94,234,212,.7)}button.ghost{background:rgba(0,0,0,0)}button:disabled{opacity:.55;cursor:not-allowed}.input{width:100%;border-radius:12px;border:1px solid var(--border);background:hsla(0,0%,100%,.05);color:var(--text);padding:10px 12px;outline:none;font-size:14px}.input::placeholder{color:hsla(0,0%,100%,.55)}@media(prefers-color-scheme: light){.input::placeholder{color:rgba(2,6,23,.4)}}.small{font-size:12px;color:var(--muted)}.treeWrap{padding:10px 10px 14px;overflow:auto;min-height:0}.tree{font-size:13px;line-height:1.35;padding:4px 0;user-select:none}.tree .node{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px;cursor:pointer;transition:background .12s ease;border:1px solid rgba(0,0,0,0)}.tree .node:hover{background:hsla(0,0%,100%,.06)}.tree .node.active{background:rgba(94,234,212,.14);background:rgba(94,234,212,.4)}.tree .indent{margin-left:14px}.icon{width:16px;height:16px;display:inline-block;vertical-align:middle;flex-shrink:0;color:inherit;pointer-events:none;opacity:.85}.node .name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node .meta{font-size:11px;color:var(--muted);flex:0 0 auto}.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;padding:0 2px 2px}.tag{font-size:11px;padding:3px 7px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:hsla(0,0%,100%,.04);cursor:pointer}.tag.active{border-color:rgba(94,234,212,.45);color:var(--text);background:rgba(94,234,212,.12)}.main{display:flex;flex-direction:column;min-height:0;border-radius:0}.main header{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;min-height:54px}.viewModePicker{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border);border-radius:999px;background:hsla(0,0%,100%,.04);flex:0 0 auto}.viewModeBtn{border:0;background:rgba(0,0,0,0);color:var(--muted);border-radius:999px;padding:6px 10px;font-size:12px;line-height:1;font-weight:700;white-space:nowrap}.viewModeBtn:hover{background:hsla(0,0%,100%,.06);color:var(--text)}.viewModeBtn.active{background:rgba(94,234,212,.16);color:var(--text);box-shadow:inset 0 0 0 1px rgba(94,234,212,.35)}.filename{font-weight:800;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55vw}.dirtyDot{width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 3px rgba(251,113,113,.18);display:none;flex:0 0 auto}.dirtyDot.show{display:inline-block}.status{margin-left:auto;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;min-width:220px;justify-content:flex-end}.status .badge{padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:hsla(0,0%,100%,.04);color:var(--muted);max-width:60ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status .badge.ok{border-color:rgba(52,211,153,.35);color:rgba(52,211,153,.95);background:rgba(52,211,153,.1)}.status .badge.warn{border-color:rgba(251,191,36,.35);color:rgba(251,191,36,.95);background:rgba(251,191,36,.1)}.status .badge.err{border-color:rgba(251,113,133,.4);color:rgba(251,113,133,.95);background:rgba(251,113,133,.1)}.split{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 1fr}.split.view-source,.split.view-preview{grid-template-columns:1fr}.split.view-source.with-cogito,.split.view-source.with-document-linter,.split.view-preview.with-cogito,.split.view-preview.with-document-linter{grid-template-columns:1fr 320px}.split.view-split.with-cogito,.split.view-split.with-document-linter{grid-template-columns:1fr 1fr 320px}.editorPane,.previewPane{min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column}.editorPane{border-right:1px solid var(--border);background:var(--panel2)}.split.view-source .editorPane{border-right:0}.split.view-preview .previewPane{border-left:0}.editorPane[hidden],.previewPane[hidden],.cogitoPanel[hidden],.documentLinterPanel[hidden]{display:none !important}textarea{width:100%;height:100%;resize:none;border:none;outline:none;padding:14px 14px 18px;font-family:var(--mono);font-size:14px;line-height:1.5;background:rgba(0,0,0,0);color:var(--text);overflow:auto;white-space:pre-wrap;word-break:break-word;tab-size:2}.preview{padding:14px 16px 18px;min-width:0;min-height:0;overflow-y:auto}.cogitoPanel{min-height:0;border-left:1px solid var(--border);background:var(--panel2);padding:12px;display:flex;flex-direction:column;gap:10px;overflow:auto}.cogitoPanel[hidden]{display:none}.documentLinterPanel{min-height:0;border-left:1px solid var(--border);background:var(--panel2);padding:12px;display:flex;flex-direction:column;gap:10px;overflow:auto}.documentLinterPanel[hidden]{display:none}.documentLinterHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:0;border:0;min-height:0}.documentLinterAutoRun{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);user-select:none}.documentLinterAutoRun input{margin:0}.documentLinterResults{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:12px}.documentLinterSummary{display:grid;gap:10px;margin-bottom:10px}.documentLinterSummaryBlock{border:1px solid var(--border);border-radius:12px;padding:10px;background:hsla(0,0%,100%,.03)}.documentLinterSummaryBlock h3{margin:0 0 8px;font-size:13px;font-weight:700}.documentLinterSummaryBlock ul,.documentLinterSummaryBlock ol{margin:0;padding-left:18px;display:grid;gap:6px}.documentLinterCategory{border:1px solid var(--border);border-radius:12px;padding:10px;background:hsla(0,0%,100%,.03);margin:0}.documentLinterCategoryHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border)}.documentLinterCategoryHeader h3{margin:0;font-size:13px;font-weight:600}.documentLinterScore{font-size:14px;font-weight:700;padding:2px 6px;border-radius:4px}.documentLinterSuggestions{display:flex;flex-direction:column;gap:4px}.documentLinterSuggestion{font-size:12px;line-height:1.4}.documentLinterLineButton{border:0;background:rgba(0,0,0,0);color:var(--accent);padding:0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.documentLinterLineButton:hover,.documentLinterLineButton:focus-visible{color:var(--text);outline:none}.documentLinterSectionAnalysis{display:grid;gap:10px;margin-top:2px;padding-top:8px}.documentLinterSectionAnalysis h3{margin:0;font-size:13px;font-weight:700}.documentLinterSectionList{display:grid;gap:10px}.documentLinterSectionCard{border:1px solid var(--border);border-radius:12px;padding:10px;background:hsla(0,0%,100%,.03);display:grid;gap:8px}.documentLinterSectionHeader{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding-bottom:8px;border-bottom:1px solid var(--border)}.documentLinterSectionHeader h4{margin:0;font-size:12px;font-weight:700}.documentLinterSectionHeader span{font-size:11px;color:var(--muted);white-space:nowrap}.documentLinterSectionNotes{display:grid;gap:4px}.cogitoHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:0;border:0;min-height:0}.cogitoModelPicker{display:flex;gap:4px}.cogitoModelBtn{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;font-size:11px;font-weight:600;border-radius:8px;opacity:.55}.cogitoModelBtn.active{opacity:1;border-color:rgba(94,234,212,.5);background:rgba(94,234,212,.14)}.cogitoQuestionList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.cogitoQuestionItem{border:1px solid var(--border);border-radius:12px;padding:10px;background:hsla(0,0%,100%,.03);display:flex;flex-direction:column;gap:8px}.cogitoQuestionText{margin:0;font-size:13px;line-height:1.4}.cogitoInsertBtn{align-self:flex-end;padding:6px 10px;font-size:12px;border-radius:10px}.preview :is(h1,h2,h3){line-height:1.25;margin:1em 0 .5em}.preview h1{font-size:1.6rem}.preview h2{font-size:1.35rem}.preview h3{font-size:1.15rem}.preview p{color:var(--text);opacity:.92}.preview a{color:var(--accent)}.preview code{font-family:var(--mono);font-size:.95em;padding:.15em .35em;border-radius:8px;background:hsla(0,0%,100%,.06);border:1px solid var(--border)}.preview pre{max-width:100%;padding:12px;border-radius:12px;background:rgba(94,234,212,.06);border:1px solid var(--border);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.preview pre code{padding:0;border:none;background:rgba(0,0,0,0)}.preview blockquote{border-left:4px solid rgba(94,234,212,.45);padding:8px 12px;margin:12px 0;background:rgba(94,234,212,.08);border-radius:10px;color:var(--muted)}.preview table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:12px;overflow:hidden}.preview th,.preview td{border-bottom:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top}.preview th{background:hsla(0,0%,100%,.05);font-weight:800}.menubar{display:flex;align-items:center;padding:0 8px;height:38px;border-radius:0;border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 80%),var(--panel);flex-shrink:0;overflow:visible}.menubar-spacer{flex:1 1 auto}.menu-action-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:4px 10px;border-radius:10px;font-size:12px}.menu-action-btn+.menu-action-btn{margin-left:8px}.menu-action-label{font-weight:700}.menu-action-btn[aria-expanded=true]{border-color:rgba(94,234,212,.6);background:rgba(94,234,212,.16)}.glyphicon{display:inline-flex;width:16px;justify-content:center;align-items:center;line-height:1;font-size:14px}.glyphicon-education::before{content:"🧠"}.menu-item{position:relative;display:flex;align-items:center;gap:4px;padding:6px 12px;cursor:pointer;border-radius:8px;transition:background .12s ease;user-select:none}.menu-item:hover,.menu-item:focus,.menu-item[aria-expanded=true]{background:hsla(0,0%,100%,.08);outline:none}.menu-text{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--text)}.menu-arrow{font-size:8px;color:var(--muted);margin-left:2px}.dropdown{position:absolute;top:100%;left:0;min-width:200px;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:4px 0;display:none;z-index:100;margin-top:2px}.menu-item[aria-expanded=true] .dropdown{display:block}.dropdown li{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;cursor:pointer;transition:background .08s ease}.dropdown li:hover,.dropdown li:focus{background:rgba(94,234,212,.12);outline:none}.dropdown li[role=separator]{height:1px;padding:0;margin:4px 8px;background:var(--border);cursor:default}.dropdown li[role=separator]:hover,.dropdown li[role=separator]:focus{background:var(--border)}.menu-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text)}.menu-label-text{min-width:0}.menu-shortcut{font-size:11px;color:var(--muted);margin-left:20px}.menu-theme-check{font-size:11px;color:var(--accent);margin-left:20px;opacity:0}.menu-theme-check.active{opacity:1}.submenu-parent{position:relative}.submenu-parent .dropdown.submenu{position:absolute;left:100%;top:0;margin-left:4px;display:none}.submenu-parent:hover>.dropdown.submenu{display:block}.submenu-parent>.menu-arrow{font-size:6px;margin-left:6px}.toast{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(0,0,0,.7);color:#fff;padding:10px 12px;border-radius:12px;border:1px solid hsla(0,0%,100%,.18);max-width:min(760px,100vw - 28px);box-shadow:0 14px 40px rgba(0,0,0,.35);display:none;z-index:1000;font-size:13px;backdrop-filter:blur(10px)}.toast.show{display:block}.toast .trow{display:flex;gap:10px;align-items:flex-start}.toast .trow .tmsg{flex:1 1 auto}.toast .trow button{padding:6px 8px;border-radius:10px;font-size:12px}.webmcpModal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;z-index:1050;opacity:0;pointer-events:none;visibility:hidden}.webmcpModal.show{opacity:1;pointer-events:auto;visibility:visible}.webmcpModalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.56);backdrop-filter:blur(8px)}.webmcpModalCard{position:relative;width:min(680px,100vw - 40px);max-height:calc(100vh - 40px);overflow:auto;padding:18px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 100%),var(--panel);box-shadow:var(--shadow)}.webmcpModalHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}#webmcpNoteForm{display:grid;gap:10px}#webmcpNoteForm textarea{min-height:160px;resize:vertical}.webmcpModalActions{justify-content:flex-end;margin-top:4px}@media(max-width: 980px){.app{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;height:100%}.app.sidebar-collapsed{grid-template-columns:1fr}.split,.split.view-source,.split.view-preview,.split.view-split.with-cogito,.split.view-split.with-document-linter,.split.view-source.with-cogito,.split.view-source.with-document-linter,.split.view-preview.with-cogito,.split.view-preview.with-document-linter{grid-template-columns:1fr}.editorPane{border-right:none;border-bottom:1px solid var(--border);min-height:40vh}.previewPane{min-height:40vh}.cogitoPanel{border-left:none;border-top:1px solid var(--border);min-height:30vh}.documentLinterPanel{border-left:none;border-top:1px solid var(--border);min-height:30vh}.filename{max-width:70vw}.sidebarToggle{position:static;margin:10px;width:calc(100% - 20px);height:auto;transform:none;writing-mode:horizontal-tb;text-orientation:mixed;letter-spacing:normal}.sidebar.collapsed .sidebarPanel{display:none}.sidebar.collapsed .sidebarToggle{display:flex;width:calc(100% - 20px);writing-mode:horizontal-tb;text-orientation:mixed;letter-spacing:normal}.sidebar.collapsed{height:auto;min-height:0}.webmcpModal{padding:12px;align-items:flex-end}.webmcpModalCard{width:100%;max-height:min(80vh,720px);border-radius:18px 18px 0 0}textarea{font-size:16px}} \ No newline at end of file diff --git a/ink-app.html b/ink-app.html index f8266e2..e8d6ec9 100644 --- a/ink-app.html +++ b/ink-app.html @@ -8,7 +8,7 @@ diff --git a/openspec/changes/fix-mobile-textarea-zoom/proposal.md b/openspec/changes/fix-mobile-textarea-zoom/proposal.md new file mode 100644 index 0000000..21f0178 --- /dev/null +++ b/openspec/changes/fix-mobile-textarea-zoom/proposal.md @@ -0,0 +1,14 @@ +# Change: Fix Mobile Textarea Zoom Issue + +## Why +On mobile devices, tapping the textarea causes unwanted zoom because the font-size (14px) is below the 16px threshold that triggers automatic zoom on iOS Safari and other mobile browsers. This breaks the user experience and makes editing difficult. + +## What Changes +- Increase textarea font-size to 16px on mobile devices +- Add media query targeting mobile viewports to apply appropriate font-size +- Maintain existing 14px font-size on desktop where zoom is not an issue + +## Impact +- Affected specs: mobile-support +- Affected code: src/styles.scss +- Breaking changes: none (style-only improvement) \ No newline at end of file diff --git a/openspec/changes/fix-mobile-textarea-zoom/specs/mobile-support/spec.md b/openspec/changes/fix-mobile-textarea-zoom/specs/mobile-support/spec.md new file mode 100644 index 0000000..002a02a --- /dev/null +++ b/openspec/changes/fix-mobile-textarea-zoom/specs/mobile-support/spec.md @@ -0,0 +1,13 @@ +## MODIFIED Requirements +### Requirement: Mobile Text Input Support +The system SHALL provide a comfortable editing experience on mobile devices without unwanted zoom behavior. + +#### Scenario: Tap textarea on mobile device +- **WHEN** user taps the textarea on a mobile device +- **THEN** the textarea does not trigger automatic browser zoom +- **AND** the font-size is at least 16px to prevent iOS Safari zoom behavior + +#### Scenario: Desktop editing experience unchanged +- **WHEN** user edits on desktop viewport +- **THEN** the textarea maintains the original 14px font-size +- **AND** the editing experience remains consistent with previous behavior \ No newline at end of file diff --git a/openspec/changes/fix-mobile-textarea-zoom/tasks.md b/openspec/changes/fix-mobile-textarea-zoom/tasks.md new file mode 100644 index 0000000..9f84aa6 --- /dev/null +++ b/openspec/changes/fix-mobile-textarea-zoom/tasks.md @@ -0,0 +1,3 @@ +## 1. Implementation +- [x] 1.1 Add 16px font-size for textarea on mobile viewports +- [x] 1.2 Build and verify fix in output diff --git a/src/styles.scss b/src/styles.scss index 69a2924..6461b09 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1199,4 +1199,7 @@ max-height: min(80vh, 720px); border-radius: 18px 18px 0 0; } + textarea{ + font-size: 16px; + } } From 61babdb2e58f341cb01d64a21683e4786dbcaaed Mon Sep 17 00:00:00 2001 From: Federico Viscioletti Date: Fri, 19 Jun 2026 14:05:13 +0000 Subject: [PATCH 2/2] added text to proposal --- openspec/changes/fix-mobile-textarea-zoom/proposal.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/openspec/changes/fix-mobile-textarea-zoom/proposal.md b/openspec/changes/fix-mobile-textarea-zoom/proposal.md index 21f0178..d94ac16 100644 --- a/openspec/changes/fix-mobile-textarea-zoom/proposal.md +++ b/openspec/changes/fix-mobile-textarea-zoom/proposal.md @@ -11,4 +11,6 @@ On mobile devices, tapping the textarea causes unwanted zoom because the font-si ## Impact - Affected specs: mobile-support - Affected code: src/styles.scss -- Breaking changes: none (style-only improvement) \ No newline at end of file +- Breaking changes: none (style-only improvement) + +.