Number of spaces for tab key in the text editor and code editor panels

[philwareham]

We are trying to decide if 2 spaces, 3 spaces, or 4 spaces would be a good length for tabbed indents in the text editor and code editor panels of Textpattern - see issue #1628 for further context. Considering the potentially narrow width these sections can be when on smaller device viewports.

[bloatware]

We already have few @media (max-width) rules in admin css. Why not to use 4 spaces by default and 2 spaces on narrow screens?

[philwareham]

@bloatware good idea - I have done a commit with that in place.

[phiw13]

We already have few @media (max-width) rules in admin css. Why not to use 4 spaces by default and 2 spaces on narrow screens?

You can do better, use @container queries to only apply a larger tab-size if the container is wide enough. See MDN @container and MDN container-name.

Demo here: https://dev.l-c-n.com/txp-4.9/txp-sandspace-spacing-with-tabkey.html (sample code at bottom)

[philwareham]

@phiw13 of course, hadn't considered that. I'd not actually used container queries yet (bit late to the party on that one) but your code makes sense - I'll implement later today.

[phiw13]

I found some issue with the suggested code: container-type triggers containment, which in turns can cause layering issues. The original selector .txp-layout-4col-3span also applies to the wrapper around the search box. the containment cause the dropdown to layer below elements / blocks later in the page.

A possibly better selector can be #main_content. I’ve updated the demo sample code.

–^–

PS - Eventually it might an interesting idea to add a class to all those larger content edit columns.