WebUI Tab Strip: Prevent group titles from overflowing

https://imgur.com/a/KpWnPGN

Change-Id: I9783df88d5270d7fbe6d4913573834ff52c55439
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2098983Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#749445}

chrome/browser/resources/tab_strip/tab_group.html

@@ -15,10 +15,16 @@
   padding: var(--tabstrip-tab-spacing);
 }
 
+#chipContainer {
+  min-width: 100%;
+  width: 0;
+}
+
 #chip {
   display: inline-block;
   height: var(--tabstrip-tab-group-title-height);
   margin-bottom: var(--tabstrip-tab-group-title-margin);
+  max-width: 100%;
 }
 
 #chip:focus {
@@ -33,7 +39,11 @@
   display: inline-block;
   height: var(--tabstrip-tab-group-title-height);
   line-height: var(--tabstrip-tab-group-title-height);
+  max-width: 100%;
+  overflow: hidden;
   padding: 0 6px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 #title:empty {
@@ -157,8 +167,10 @@
 
 <div id="dragImage">
   <div id="tabGroup">
-    <div id="chip" draggable="true" tabindex="0" role="button">
-      <div id="title"></div>
+    <div id="chipContainer">
+      <div id="chip" draggable="true" tabindex="0" role="button">
+        <div id="title"></div>
+      </div>
     </div>
     <div id="tabs">
       <slot></slot>