Cell Toolbar in cell, not fixed to bottom

What would cause the Cell Toolbar (Observable interface) to not be fixed at the bottom of the editor screen, but rather be embedded at the bottom of the cell (like it used to be, pre Nov '21), and where it does not have the field to name the cell?

I’ve seen this with a handful of student users, all brand new to Observable, over the past year. I cannot replicate it on my own, and I don’t see any setting for this, but it is very consistent for these people. Multiple browsers on the same machine, but only a few people’s machines.

We do this when we detect touch inputs. You can see the behavior yourself if you toggle the device toolbar in your browser’s devtools and then under Dimensions select a device with a larger display area, like the Surface Pro.

I suspect that the affected machines have touch displays. Do they also have mouses or trackpads connected to them? And has this behavior caused any problems for you or your students?

Aha - great. Yes I’m able to simulate that. Thank you. I will check with the students, but that’s very likely the situation. I don’t know if they have an external mouse, but these are laptops so would at least have a built-in trackpad, even if they have the touch display.

So then, can this mode be turned off or changed?

Yes it causes one main problem - you cannot name the cell using that interface. The field to the left of the buttons to name the cell just isn’t there. Is there another way?

  1. this creates consistency issues for teaching and demonstrations.
  2. sometimes we need to name the cell this way, like if I’m naming an HTML cell to be able to refer to it in other code or in the minimap.

The design primarily targeted mobile users. Let me check back with the team to see what we can do about it.

As a workaround you can create a named JavaScript cell and then change it to a different cell mode. Note that the cell must not contain any errors. Here is a short demo:

Even if the cell naming field were just still there in the “mobile” version, that would work.
Or allow editing of the cell name in cell menu (vertical ellipsis menu).

Alternatively, you could use a tagged template literal inside a Javascript cell. Something like

my_cell_name = md`## Markdown
Let's do it!`

I’m experiencing this problem as well. I’m using a Lenovo Thinkpad and I don’t have easy access to the cell names.

My machine has a touchscreen and can fold over and convert into a tablet, but it is also a full fledged laptop, and I’m unable to see the cell names in laptop mode. My browser window is over 1000 pixels wide, so there’s no lack of space in the cell toolbar, whether it is anchored to the window or the cell.

@akrawitz Sounds like you might want to consider my suggestion:

A reasonable workaround, but this still feels like a design flaw. Why hide cell names from users with an entire class of laptops (i.e. convertible/touch enabled), not to mention mobile users? Reasonable alternatives might include:

  1. Include cell name field in cell toolbar when it is attached to cell instead of window, if the window is wide enough. (This would help the laptop users, but not most the mobile users.)
  2. Add a “Cell name” item to the cell’s menu, either always, or only when the cell name field is hidden from the toolbar. (This would help both laptop and mobile users.)

I will post this to github/observablehq/feedback/issues, since that may be a more helpful location: Cell Toolbar missing 'cell name' field on touch-enabled laptops · Issue #582 · observablehq/feedback · GitHub