# A new edit button & better mobile UI

**URL:** <https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434>\
**Category:** Announcements\
**Created:** [November 27, 2018, 6:08pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434 "2018-11-27T18:08:30Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [November 27, 2018, 6:08pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/1 "2018-11-27T18:08:30Z")

</div>

Hi there folks!

We just introduced a small but pretty significant change to part of Observable:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/a58a65a0b6c231a127e5c9277b5c12110d141a4e.png)

Instead of a › next to cells, there’s now a ⠇ with options for what to do: you can edit, close, and permalink named cells through this UI.

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/1/14b41542e69c68617c0533818610b8610461e5c1.png)

You can still click on the cell’s name to the left of the dots to immediately toggle the cell. There’s also one more perk: you can click at the bottom of a notebook to quickly add a cell there, without having to target the ➕ button.

We’re making room for some upcoming features, as well as improving the mobile and narrow-screen experience. Where we previously had an awkward toggle to see cell names on mobile - and no way to permalink those cells - we now have an immediate place to click to trigger editing, permalink, or delete cells, on both mobile & narrow-screen devices like iPads.

---

<div class="post-metadata">

**Author:** ![bumbeishvili](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bumbeishvili/32/4220_2.png) [@bumbeishvili](https://talk.observablehq.com/u/bumbeishvili)\
**Post date:** [November 27, 2018, 8:33pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/2 "2018-11-27T20:33:40Z")

</div>

Just tested it with mobile browser, I had really much better experience this time than before

---

<div class="post-metadata">

**Author:** ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)\
**Post date:** [November 28, 2018, 8:22pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/3 "2018-11-28T20:22:57Z")

</div>

I’m a bit ambivalent regarding the ui change. I liked the triangle that simply opened a cell, ready to edit. Now I need two clicks to do that. I find that harder, more obtrusive. I found the old delete cell harder, requiring two clicks.

How about having a trash can next to the pushpin next to the triangle, with sufficient space between the to avoid clicking errors?

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [November 28, 2018, 9:04pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/4 "2018-11-28T21:04:08Z")

</div>

A single click still suffices if you click anywhere else (_away_ from the new “⋮” menu) in the space to the left of a cell.

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [November 28, 2018, 10:41pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/5 "2018-11-28T22:41:29Z")

</div>

Hi there Tom & Team. Thanks for all your hard work to make Observable such a great site! I continue to learn a lot.

Regarding these more recent changes – is it just me, or did we lose the ‘move up / down’ feature for organizing notebooks?

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [November 28, 2018, 10:42pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/6 "2018-11-28T22:42:18Z")

</div>

I also found that the the triangle was a bit more intuitive for editing - and only a click away.

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [November 28, 2018, 10:43pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/7 "2018-11-28T22:43:36Z")

</div>

The up & down buttons are gone, because we’ve got a better way to visually rearrange cells now: [you can now drag cells](https://talk.observablehq.com/t/feature-request-drag-to-re-arrange/82/18?u=tom).

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [November 28, 2018, 11:17pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/8 "2018-11-28T23:17:36Z")

</div>

Fortunately, the keyboard shortcuts for moving cells up and down still work!

---

<div class="post-metadata">

**Author:** ![Job](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/job/32/1185_2.png) [@Job](https://talk.observablehq.com/u/Job)\
**Post date:** [November 29, 2018, 1:17am UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/9 "2018-11-29T01:17:08Z")

</div>

I think you’re approaching this from a Desktop UI mindset, right? Because “sufficient space” is a notoriously difficult problem on mobile 😉

EDIT: Also, on Desktop just clicking left of three dots expands/collapses the cell as always

---

<div class="post-metadata">

**Author:** ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)\
**Post date:** [November 29, 2018, 7:11am UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/10 "2018-11-29T07:11:32Z")

</div>

Thanks for all replies! I totally missed that you can simply click in the huge margin area to open en close a cell. Wonderful. I withdraw my remarks. Great improvement. Thanks Observable Team.

---

<div class="post-metadata">

**Author:** ![bmschmidt](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bmschmidt/32/1010_2.png) [@bmschmidt](https://talk.observablehq.com/u/bmschmidt)\
**Post date:** [November 29, 2018, 9:12pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/11 "2018-11-29T21:12:44Z")

</div>

I like these changes, but a minor note: I no longer seem to be able reorder cells on mobile (iPad/Safari). Before I could click the arrow buttons, but the new drag mechanism does not appear to be activated on touch events. Unless I’m missing something?

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [November 29, 2018, 9:29pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/12 "2018-11-29T21:29:13Z")

</div>

Cool! (in response to cell dragging)

---

<div class="post-metadata">

**Author:** ![caw](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/caw/32/1327_2.png) [@caw](https://talk.observablehq.com/u/caw)\
**Post date:** [November 30, 2018, 10:43am UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/13 "2018-11-30T10:43:23Z")

</div>

One problem with this design is the edit and delete button are so close to each other that it’s pretty easy to accidentally delete when I meant to edit. Maybe I missed it but there doesn’t seem to be an easy way to undo a cell deletion… Anybody know a good way to go back one version?

---

<div class="post-metadata">

**Author:** ![caw](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/caw/32/1327_2.png) [@caw](https://talk.observablehq.com/u/caw)\
**Post date:** [November 30, 2018, 12:19pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/14 "2018-11-30T12:19:02Z")

</div>

I ended up retrieving the deleted cell contents from the previous version with the help of this notebook [https://beta.observablehq.com/@mootari/notebook-data](https://beta.observablehq.com/@mootari/notebook-data)

Will have to be more careful in the future.

---

<div class="post-metadata">

**Author:** ![Job](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/job/32/1185_2.png) [@Job](https://talk.observablehq.com/u/Job)\
**Post date:** [November 30, 2018, 12:40pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/15 "2018-11-30T12:40:18Z")

</div>

> [@bmschmidt](#):
>
> I like these changes, but a minor note: I no longer seem to be able reorder cells on mobile (iPad/Safari). Before I could click the arrow buttons, but the new drag mechanism does not appear to be activated on touch events.

Can confirm this on Android phone (both Firefox and Chrome) as well

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [November 30, 2018, 9:24pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/16 "2018-11-30T21:24:03Z")

</div>

Just shipped dragging with phones and tablets - we’ll work on scrolling-as-you-drag, and other assorted improvements, soon.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [December 1, 2018, 1:00am UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/17 "2018-12-01T01:00:43Z")

</div>

Thanks for the feedback. We’ve added an extra click to confirm that you want to delete the cell.

Also, here’s a new hidden feature that’s handy for viewing recent changes: for a notebook you own, you can show the ten (or however many) most-recent changes like so:

```
https://beta.observablehq.com/compare/0123456789abcdef~10

```

Similarly, to compare version 20 to the latest version, you can say:

```
https://beta.observablehq.com/compare/0123456789abcdef@20

```

If you then choose “Compare reverse” from the notebook menu, you can click Merge to undo the changes. We’ll add better history browsing in the near future to make this easier.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [December 7, 2018, 8:11pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/18 "2018-12-07T20:11:34Z")

</div>

A post was merged into an existing topic: [Fresh & clean new cell name display](https://talk.observablehq.com/t/fresh-clean-new-cell-name-display/1456/4)

---

<div class="post-metadata">

**Author:** ![tau](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tau/32/1038_2.png) [@tau](https://talk.observablehq.com/u/tau)\
**Post date:** [December 8, 2018, 12:35am UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/19 "2018-12-08T00:35:55Z")

</div>

I did not have much time recently and was really surprised about the changes. The UI feels really clean and well thought. Thanks for the amazing work 🙂

---

<div class="post-metadata">

**Author:** ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)\
**Post date:** [December 9, 2018, 8:43pm UTC](https://talk.observablehq.com/t/a-new-edit-button-better-mobile-ui/1434/20 "2018-12-09T20:43:39Z")

</div>

I really liked how an empty cell would automatically get deleted if it was empty. Seems like you could bring that feature back and it would still fit in with the new changes. The other changes are great!
