Layout issue in the emulator when names for collections or documents get to long

[braadworst]

[REQUIRED] Describe your environment

• Operating System version: All
• Browser version: All
• Firebase SDK version: All
• Firebase Product: All (auth, database, storage, etc)

When you have long collection names or you have documents that have pretty long IDs, the layout of the emulator goes a bit bananas. The collection names are clipped and the actions for the document are also falling of the screen, which is the most annoying part. See screenshot:

I am using a 27 inch monitor and the easiest fix is to remove the max-width property from .App-main. Although this might not resolve it for smaller screens.

Steps to reproduce:

Relevant Code:

Doesn't apply

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[dwyfrequency]

Doesn't look like I have permission to transfer this issue but I believe this belongs with the UI team https://github.com/firebase/firebase-tools-ui