[AI Assistance] Make the disclaimer take 2 lines

Allow for move vertical space when the width allows it

Bug: none
Change-Id: Iafcf30ed8d74fca87e46648154e8bcc540f0089e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6304707
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>
Auto-Submit: Nikolay Vitkov <[email protected]>

Author: Lightning00Blade

front_end/panels/ai_assistance/components/chatView.css

@@ -66,7 +66,10 @@
     position: absolute;
     top: 0;
     left: -2px; /* Needed for aligning with other divider lines */
-    width: calc(100% + 4px); /* Needed for extending the divider line to the edges */
+    width: calc(
+      100% + 4px
+    ); /* Needed for extending the divider line to the edges */
+
     height: var(--sys-size-4);
 
     & .input-form-shadow {
@@ -138,10 +141,9 @@
 }
 
 .chat-input {
-  --right-padding:
-    calc(
-      var(--sys-size-3) + 26px
-    ); /* Gap between the button and the edge + icon's width */
+  --right-padding: calc(
+    var(--sys-size-3) + 26px
+  ); /* Gap between the button and the edge + icon's width */
 
   scrollbar-width: none;
   field-sizing: content; /* stylelint-disable-line property-no-unknown */
@@ -153,8 +155,7 @@
   font: var(--sys-typescale-body4-regular);
   line-height: 18px;
   min-height: var(--sys-size-11);
-  padding:
-    var(--sys-size-4) var(--right-padding) var(--sys-size-4)
+  padding: var(--sys-size-4) var(--right-padding) var(--sys-size-4)
     var(--sys-size-4);
   color: var(--sys-color-on-surface);
   background-color: var(--sys-color-cdt-base-container);
@@ -184,9 +185,8 @@
   }
 
   &.screenshot-button {
-    --right-padding:
-    calc(
-      2*var(--sys-size-3) + 2*26px
+    --right-padding: calc(
+      2 * var(--sys-size-3) + 2 * 26px
     ); /* Gaps because of right paddings + width of two icons */
   }
 }
@@ -219,7 +219,7 @@
   border-top: var(--sys-size-1) solid var(--sys-color-divider);
 
   .disclaimer-text {
-    max-width: var(--sys-size-36);
+    max-width: var(--sys-size-38);
     color: var(--sys-color-on-surface-subtle);
     font: var(--sys-typescale-body5-regular);
     text-wrap: pretty;
@@ -442,7 +442,7 @@
   }
 
   &:not(&[open]):hover::after {
-    content: "";
+    content: '';
     height: 100%;
     width: 100%;
     border-radius: inherit;
@@ -498,7 +498,7 @@
   }
 
   summary::marker {
-    content: "";
+    content: '';
   }
 
   .step-details {
@@ -612,12 +612,11 @@ main {
       height: var(--sys-size-14);
       width: var(--sys-size-14);
       border-radius: var(--sys-shape-corner-small);
-      background:
-        linear-gradient(
-          135deg,
-          var(--sys-color-gradient-primary),
-          var(--sys-color-gradient-tertiary)
-        );
+      background: linear-gradient(
+        135deg,
+        var(--sys-color-gradient-primary),
+        var(--sys-color-gradient-tertiary)
+      );
     }
 
     h1 {
@@ -692,12 +691,11 @@ main {
     border-radius: var(--sys-shape-corner-extra-small);
     width: var(--sys-size-9);
     height: var(--sys-size-9);
-    background:
-      linear-gradient(
-        135deg,
-        var(--sys-color-gradient-primary),
-        var(--sys-color-gradient-tertiary)
-      );
+    background: linear-gradient(
+      135deg,
+      var(--sys-color-gradient-primary),
+      var(--sys-color-gradient-tertiary)
+    );
     margin-right: var(--sys-size-5);
 
     devtools-icon {
@@ -752,12 +750,12 @@ main {
     }
 
     &::marker {
-      content: "";
+      content: '';
     }
   }
 
   &:not(&[open]):hover::after {
-    content: "";
+    content: '';
     height: 100%;
     width: 100%;
     border-radius: inherit;