firebase / firebase-tools-ui

A local-first UI for Firebase Emulator Suite.
https://firebase.googleblog.com/2020/05/local-firebase-emulator-ui.html
Apache License 2.0
262 stars 60 forks source link

Cannot access context menu (i.e. cannot delete documents) with really long IDs #981

Open go-sean-go opened 11 months ago

go-sean-go commented 11 months ago

Describe the bug When a document's ID is long enough, it pushes the context menu (and 'copy ID' buttons) off the right edge of the Emulator UI. This means that I cannot delete these documents using the Firebase Emulator UI. See screenshot below.

Here is an example of the problem:

Screenshot 2023-07-26 at 3 39 56 PM

See how, at the far-right edge, there is no context menu (triple-dots menu) that I can click to expand to delete the document.

(Note that these 'really long IDs' are being used because I need to be able to set() documents at an expected path, and that expected path is derived from several other documents - so I smash those IDs together with a :: separator to ensure every doc is unique AND has a predictable ID. This isn't related to the Emulator UI problem, but I wanted to explain so that it's clear I can't just use shorter IDs/etc.)

To Reproduce

  1. Create a document with a long ID/path. Here is an example that I'm using:

    users2zZhfzWe7zbKaOXSVIyEhjMgeXYJ/followedActivities/2zZhfzWe7zbKaOXSVIyEhjMgeXYJ::21ShMAq8YRdmIwWgfcJh::2zZhfzWe7zbKaOXSVIyEhjMgeXYJ

    This would be at the following local URL: http://localhost:4000/firestore/data/users/ttV1vXLCI4yHhYbiAiz4L5h1vCws/followedActivities/ttV1vXLCI4yHhYbiAiz4L5h1vCws%3A%3Am3b32tOf217u0iZJB5KA%3A%3AttV1vXLCI4yHhYbiAiz4L5h1vCws

  2. View the document in the Emulator Suite.

  3. Cannot click/find the context menu that lets me delete the document, delete all fields

Expected behavior In the production Firebase Console, the context menu shows 'overlapping' the document's ID, so that it's available even if the ID is very long. Here is how it looks for me in production (on a similar document):

image

Desktop (please complete the following information):