Skip to content

Edit mode shrinks cell padding (4px 6px), shifting the editor off the display value #79

Description

@zvndev

Problem

The theme CSS applies .yable-td[data-editing='true'] { padding: 4px 6px }, overriding the normal --yable-cell-padding-x/y (14px default). Entering edit mode therefore visibly jumps the value ~7px toward the cell edge, and the editor's text doesn't line up with the display text — a layout shift on every edit, most jarring on right-aligned numeric columns.

Repro

Any editable column with default theme → click/Enter to edit → watch the value jump toward the cell border, then jump back on commit.

Workaround

App CSS restoring padding: var(--yable-cell-padding-y) var(--yable-cell-padding-x) on [data-editing='true'] plus zero-padding transparent input styling, so the editor occupies exactly the display box.

Suggested fix

Edit mode should preserve the cell's padding and express 'editing' via a ring/outline only — in-place editing shouldn't move the value. (Spreadsheet convention: the content stays put; a border appears around it.)

Versions: yable-themes 0.4.8 / yable-react 0.10.4.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions