[Patch agent] Fix overflow issues for long folder names

Bug: http://b/406133185
Change-Id: I5fc7c4efc7c248405470c88d7c0e3eec85ea8166
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6434286
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
Auto-Submit: Wolfgang Beyer <wolfi@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>

Author: wolfib

front_end/panels/ai_assistance/PatchWidget.ts

@@ -310,7 +310,7 @@ export class PatchWidget extends UI.Widget.Widget {
           ${input.projectName ? html`
             <div class="change-workspace">
               <div class="selected-folder">
-                <devtools-icon .name=${'folder'}></devtools-icon> <span title=${input.projectPath}>${input.projectName}</span>
+                <devtools-icon .name=${'folder'}></devtools-icon> <span class="folder-name" title=${input.projectPath}>${input.projectName}</span>
               </div>
               <devtools-button
                 @click=${input.onChangeWorkspaceClick}

front_end/panels/ai_assistance/SelectWorkspaceDialog.ts

@@ -111,7 +111,7 @@ export class SelectWorkspaceDialog extends UI.Widget.VBox {
                     title=${project.path}
                   >
                     <devtools-icon class="folder-icon" .name=${'folder'}></devtools-icon>
-                    ${project.name}
+                    <span class="ellipsis">${project.name}</span>
                   </li>`;
               })}
             </ul>

front_end/panels/ai_assistance/components/chatView.css

@@ -757,6 +757,7 @@ main {
   position: relative;
   margin: 0 var(--sys-size-5);
   padding: 0 var(--sys-size-5);
+  min-width: var(--sys-size-31);
 
   &.saved-to-disk {
     pointer-events: none;
@@ -864,12 +865,20 @@ main {
       display: flex;
       align-items: center;
       gap: var(--sys-size-3);
+      overflow: hidden;
+
+      .folder-name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
 
     .change-workspace {
       display: flex;
       flex-direction: row;
       gap: var(--sys-size-2);
+      overflow: hidden;
     }
 
     .info-tooltip-container {

front_end/panels/ai_assistance/selectWorkspaceDialog.css

@@ -74,3 +74,9 @@ li.selected {
     color: var(--app-color-navigation-drawer-label-selected);
   }
 }
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}