[AI Assistance] Fix link hit box

Currently the click hit box of the link expands due to the
flex-grow: 1.
Wrap the links in a div to fix this.


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

Author: Lightning00Blade

front_end/panels/ai_assistance/PatchWidget.ts

@@ -203,7 +203,7 @@ export class PatchWidget extends UI.Widget.Widget {
         }
 
         return html`<x-link
-          class="link sources-link"
+          class="link"
           title="${UIStringsNotTranslate.viewUploadedFiles} ${UIStringsNotTranslate.opensInNewTab}"
           href="data:text/plain,${encodeURIComponent(input.sources)}"
           jslog=${VisualLogging.link('files-used-in-patching').track({click: true})}>
@@ -266,7 +266,9 @@ export class PatchWidget extends UI.Widget.Widget {
         ></devtools-code-block>
         ${input.patchSuggestionState === PatchSuggestionState.ERROR
           ? html`<div class="error-container">
-              <devtools-icon .name=${'cross-circle-filled'}></devtools-icon>${lockedString(UIStringsNotTranslate.genericErrorMessage)} ${renderSourcesLink()}
+              <devtools-icon .name=${'cross-circle-filled'}></devtools-icon>${
+              lockedString(UIStringsNotTranslate.genericErrorMessage)
+              } ${renderSourcesLink()}
             </div>`
           : nothing
         }`;
@@ -280,13 +282,15 @@ export class PatchWidget extends UI.Widget.Widget {
         if (input.patchSuggestionState === PatchSuggestionState.SUCCESS) {
           return html`
           <div class="footer">
-            <x-link class="link disclaimer-link" href="https://support.google.com/legal/answer/13505487" jslog=${
-              VisualLogging.link('code-disclaimer').track({
-                click: true,
-              })}>
-              ${lockedString(UIStringsNotTranslate.codeDisclaimer)}
-            </x-link>
-            ${renderSourcesLink()}
+            <div class="left-side">
+              <x-link class="link disclaimer-link" href="https://support.google.com/legal/answer/13505487" jslog=${
+                VisualLogging.link('code-disclaimer').track({
+                  click: true,
+                })}>
+                ${lockedString(UIStringsNotTranslate.codeDisclaimer)}
+              </x-link>
+              ${renderSourcesLink()}
+            </div>
             <div class="save-or-discard-buttons">
               <devtools-button
                 @click=${input.onDiscard}

front_end/panels/ai_assistance/components/chatView.css

@@ -859,9 +859,11 @@ main {
       align-self: center;
     }
 
-    .sources-link {
+    .left-side {
       flex-grow: 1;
+      display: flex;
       align-self: center;
+      gap: var(--sys-size-3);
     }
 
     .selected-folder {