Remove unintended gaps on small screens. (#5521)

On small screens, the top bar was overflowing to the right, making the
entire document scrollable, which lead to unintended dark blue areas
appearing.

As a quick fix, make the bar itself scrollable.

Also put a minimum size on the profile name button and make sure its
edit icon isn't squished.

And prevent scrolling the contents of .Details, for example from a
single overflowing pixel.

Author: mstange

src/components/app/Details.css

@@ -1,5 +1,6 @@
 .Details {
   display: flex;
+  overflow: clip;
   flex: auto;
   flex-direction: column;
 }

src/components/app/ProfileName.css

@@ -16,6 +16,7 @@
 
 .profileNameButton {
   overflow: hidden;
+  min-width: 80px;
   padding: 0 9px;
   font-weight: 700;
   margin-inline-end: 5px;
@@ -24,6 +25,7 @@
 }
 
 .profileNameButton::before {
+  flex-shrink: 0;
   background-image: url(firefox-profiler-res/img/svg/edit-name-profiler.svg);
 }
 

src/components/app/ProfileViewer.css

@@ -113,6 +113,8 @@
   border-bottom: 1px solid var(--grey-30);
   margin: 0;
   background: var(--grey-10);
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
 .profileViewerSpacer {