keyboard tab issues when responsive layout on small screen

[eviltester]

These from 20260621/issue-233-002/defects

root cause is a general lack of responsiveness design, testing and usage at small resolutions - which is true. We need to make the app responsive for smaller layouts - particularly tippies, schema ui edits

Defect 007: Narrow-width generator focus order breaks before visible row controls

Summary

At 320x568, keyboard focus in generator.html becomes unstable after the Column Name textbox. Focus moves to BODY and loops back to earlier controls instead of continuing through the remaining visible row controls.

Environment

• Page under test: https://eviltester.github.io/grid-table-editor/generator.html
• Viewport used in evidence: 320x568

Steps To Reproduce

1. Open https://eviltester.github.io/grid-table-editor/generator.html.
2. Resize to 320x568.
3. Press Tab repeatedly from the top of the page.
4. Continue until focus reaches the schema row area.

Expected

Focus should continue through the visible schema-row controls in order, including method/type controls, help link, and value field.

Actual

After the Column Name textbox, focus jumps to BODY and then loops back to earlier controls instead of progressing through the remaining visible row controls.

Repeatability

• Repeatable

Evidence

• Supporting log: ../responsive-accessibility-test-log.md

Notes

• This makes keyboard-only use of the narrow-width generator unreliable even though the page does not horizontally overflow.

Defect 008: Edit as Text button becomes illegible at 320x568

Summary

At 320x568, the Edit as Text button in generator.html shrinks enough that the label wraps into an unreadable stacked fragment.

Environment

• Page under test: https://eviltester.github.io/grid-table-editor/generator.html
• Viewport used in evidence: 320x568

Steps To Reproduce

1. Open https://eviltester.github.io/grid-table-editor/generator.html.
2. Resize to 320x568.
3. Inspect the Edit as Text button in the schema panel.

Expected

The button label should remain readable, or the layout should adapt so the control keeps a usable text label.

Actual

The button compresses into a very small square and the label wraps into an unreadable vertical fragment beside the neighboring file buttons.

Repeatability

• Repeatable

Evidence

• Screenshot:
• Supporting log: ../responsive-accessibility-test-log.md

Notes

• The responsive pass did not find horizontal overflow here, so this is a legibility and control-density defect rather than a page overflow defect.