Update CSS for toolbar to allow for better wrapping on smaller screens

Screenshots:
- Bigger window size: https://screenshot.googleplex.com/B64oqJ84NtEukkf
- Small window size without citations: https://screenshot.googleplex.com/BQjNFvidUCb3w8U
- Small window size with citations: https://screenshot.googleplex.com/6rt34jsY6WxnwcD

This CL also removes '\n' as the suffix in case of no characters after
the cursor

Bug: 425645741
Change-Id: Iaed77b77a522c093fd999a71114c0bffe6029dba
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6823965
Auto-Submit: Samiya Caur <[email protected]>
Commit-Queue: Samiya Caur <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: Samiya Caur

front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -105,20 +105,21 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
                       };
                     }
                   })}></devtools-spinner>
-                <span
-                    tabIndex="0"
-                    class="link"
-                    role="link"
-                    jslog=${VisualLogging.link('open-ai-settings').track({
-                        click: true,
-                    })}
-                    aria-details=${input.disclaimerTooltipId}
-                    aria-describedby=${input.disclaimerTooltipId}
-                    @click=${() => {
-                        void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
-                    }}
-                >${lockedString(UIStrings.relevantData)}</span>${lockedString(UIStrings.isSentToGoogle)}
-                <devtools-tooltip
+                <span class="disclaimer-text">
+                  <span
+                      tabIndex="0"
+                      class="link"
+                      role="link"
+                      jslog=${VisualLogging.link('open-ai-settings').track({
+                          click: true,
+                      })}
+                      aria-details=${input.disclaimerTooltipId}
+                      aria-describedby=${input.disclaimerTooltipId}
+                      @click=${() => {
+                          void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+                      }}
+                  >${lockedString(UIStrings.relevantData)}</span>&nbsp;${lockedString(UIStrings.isSentToGoogle)}
+                </span><devtools-tooltip
                     id=${input.disclaimerTooltipId}
                     variant=${'rich'}
                     jslogContext=${input.panelName + '.ai-code-completion-disclaimer'}

front_end/panels/common/aiCodeCompletionSummaryToolbar.css

@@ -7,6 +7,7 @@
 @scope to (devtools-widget > *) {
   .ai-code-completion-summary-toolbar {
     display: flex;
+    height: 26px;
     border-top: var(--sys-size-1) solid var(--sys-color-divider);
     background-color: var(--sys-color-cdt-base-container);
     padding: var(--sys-size-2) var(--sys-size-5);
@@ -26,9 +27,11 @@
     }
 
     .ai-code-completion-disclaimer {
-      padding-right: var(--sys-size-5);
       gap: 5px;
       display: flex;
+      white-space: nowrap;
+      overflow: hidden;
+      flex-shrink: 0;
 
       devtools-spinner {
         margin-top: var(--sys-size-2);
@@ -39,13 +42,39 @@
     }
 
     .ai-code-completion-recitation-notice {
+      padding-left: var(--sys-size-5);
       border-left: var(--sys-size-1) solid var(--sys-color-divider);
+      white-space: nowrap;
+      overflow: hidden;
 
       span.link {
         padding-left: var(--sys-size-3);
       }
     }
 
+    @media (width < 545px) {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .ai-code-completion-disclaimer {
+        height: 26px;
+        margin-bottom: -3px;
+        margin-top: var(--sys-size-2);
+        flex-shrink: 1;
+      }
+
+      .ai-code-completion-recitation-notice {
+        height: 26px;
+        padding-left: 0;
+        border-left: 0;
+        margin-top: -3px;
+      }
+
+      &:has(.ai-code-completion-recitation-notice) {
+        height: 46px;
+      }
+    }
+
     devtools-tooltip:popover-open {
       display: flex;
       flex-direction: column;

front_end/panels/console/ConsolePrompt.ts

@@ -252,9 +252,6 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       }
     }
     let suffix = query.substring(cursor);
-    if (suffix === '') {
-      suffix = '\n';
-    }
     if (prefix.length > AI_CODE_COMPLETION_CHARACTER_LIMIT) {
       prefix = prefix.substring(prefix.length - AI_CODE_COMPLETION_CHARACTER_LIMIT);
     }