Remove unintended gaps on small screens.

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 {