[AI Assistance] Fix file name overflow & wrap buttons

Allow flex-shrink when name is too long.
Wrap the buttons so that they are usable and make sure
that the tooltip is always shown.

Fixed: 405922851
Change-Id: Ic1d5f2d079bd51c94807a5e4dd6a0965a981fb28
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6439005
Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org>
Commit-Queue: Nikolay Vitkov <nvitkov@chromium.org>
Auto-Submit: Nikolay Vitkov <nvitkov@chromium.org>
Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org>

Author: Lightning00Blade

front_end/panels/ai_assistance/PatchWidget.ts

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

front_end/panels/ai_assistance/components/chatView.css

@@ -757,7 +757,6 @@ 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;
@@ -850,10 +849,10 @@ main {
 
   .footer {
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
     justify-content: space-between;
     margin: var(--sys-size-5) 0 var(--sys-size-5) var(--sys-size-2);
-    gap: var(--sys-size-6);
+    gap: var(--sys-size-6) var(--sys-size-5);
 
     .disclaimer-link {
       align-self: center;
@@ -866,11 +865,20 @@ main {
       gap: var(--sys-size-3);
     }
 
-    .selected-folder {
+    .save-or-discard-buttons {
+      flex-grow: 1;
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--sys-size-3);
+    }
+
+    .change-workspace {
       display: flex;
+      flex-direction: row;
       align-items: center;
       gap: var(--sys-size-3);
-      overflow-x: hidden;
+      min-width: var(--sys-size-22);
+      flex: 1 1 40%;
 
       .folder-name {
         white-space: nowrap;
@@ -879,14 +887,6 @@ main {
       }
     }
 
-    .change-workspace {
-      display: flex;
-      flex-direction: row;
-      gap: var(--sys-size-2);
-      max-width: 50%;
-      min-width: 0;
-    }
-
     .info-tooltip-container {
       max-width: var(--sys-size-28);
 
@@ -909,8 +909,10 @@ main {
       display: flex;
       align-items: center;
       gap: var(--sys-size-3);
-      margin-left: auto;
       min-width: fit-content;
+      justify-content: flex-end;
+      flex-grow: 1;
+      flex-shrink: 1;
 
       devtools-icon {
         /* var(--sys-size-8) is too small and var(--sys-size-9) is too big. */

front_end/panels/changes/combinedDiffView.css

@@ -28,6 +28,7 @@
       .summary-left {
         display: flex;
         align-items: center;
+        min-width: 0;
         flex-grow: 0;
 
         .file-name-link {