fix(FN-2838): prevent mobile zoom on dashboard form inputs
- Add global `touch-action: manipulation` on html/body to reduce gesture-triggered zoom - Set mobile input font-size to 16px for terminal, nodes, and scripts modal form fields - Extend mobile CSS regression tests to assert the global touch-action rule
This commit is contained in:
@@ -5,6 +5,12 @@ const css = loadAllAppCss();
|
|||||||
|
|
||||||
describe("mobile input font size CSS", () => {
|
describe("mobile input font size CSS", () => {
|
||||||
describe("base (desktop) styles", () => {
|
describe("base (desktop) styles", () => {
|
||||||
|
it("html/body uses touch-action manipulation to reduce mobile zoom gestures", () => {
|
||||||
|
const htmlBodyMatch = css.match(/html,\s*body\s*\{[^}]*\}/);
|
||||||
|
expect(htmlBodyMatch).not.toBeNull();
|
||||||
|
expect(htmlBodyMatch![0]).toContain("touch-action: manipulation");
|
||||||
|
});
|
||||||
|
|
||||||
it("quick-entry-input has desktop font-size below 16px", () => {
|
it("quick-entry-input has desktop font-size below 16px", () => {
|
||||||
// Extract the .quick-entry-input rule
|
// Extract the .quick-entry-input rule
|
||||||
const quickEntryMatch = css.match(/\.quick-entry-input\s*\{[^}]*\}/);
|
const quickEntryMatch = css.match(/\.quick-entry-input\s*\{[^}]*\}/);
|
||||||
|
|||||||
@@ -870,6 +870,7 @@
|
|||||||
|
|
||||||
.add-node-modal__field input {
|
.add-node-modal__field input {
|
||||||
min-height: calc(var(--space-2xl) + var(--space-md));
|
min-height: calc(var(--space-2xl) + var(--space-md));
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Instant transition on mobile for remote fields */
|
/* Instant transition on mobile for remote fields */
|
||||||
|
|||||||
@@ -3282,6 +3282,10 @@
|
|||||||
padding: var(--space-md);
|
padding: var(--space-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gm-search-box input {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.gm-status-grid {
|
.gm-status-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
@@ -3293,6 +3297,7 @@
|
|||||||
.gm-create-form input,
|
.gm-create-form input,
|
||||||
.gm-create-form select {
|
.gm-create-form select {
|
||||||
flex: 1 1 100%;
|
flex: 1 1 100%;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gm-branch-item {
|
.gm-branch-item {
|
||||||
|
|||||||
@@ -985,7 +985,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.terminal-input {
|
.terminal-input {
|
||||||
font-size: 12px;
|
font-size: 16px;
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -540,6 +540,7 @@ body {
|
|||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
touch-action: manipulation;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root {
|
#root {
|
||||||
|
|||||||
Reference in New Issue
Block a user