[AiAssistant] Fix max width and focus ring issues with image input

Fixed: 399091160, 399064894
Change-Id: Ie3f600fb8519bf27fda081169211cb6f237d54de
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6304519
Commit-Queue: Samiya Caur <[email protected]>
Auto-Submit: Samiya Caur <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: Samiya Caur

front_end/panels/ai_assistance/components/chatView.css

@@ -134,6 +134,7 @@
     img {
       margin: var(--sys-size-4) 0;
       max-height: var(--sys-size-18);
+      max-width: 100%;
       border: 1px solid var(--sys-color-neutral-outline);
       border-radius: var(--sys-shape-corner-small);
     }
@@ -291,16 +292,19 @@
     color: var(--sys-color-on-surface-subtle);
   }
 
-  img {
-    margin: var(--sys-size-4) 0;
-    max-height: var(--sys-size-20);
-    border-radius: var(--sys-shape-corner-small);
-    border: 1px solid var(--sys-color-neutral-outline);
-    width: fit-content;
-  }
-
   .image-link {
     width: fit-content;
+    border-radius: var(--sys-shape-corner-small);
+    outline-offset: var(--sys-size-2);
+
+    img {
+      max-height: var(--sys-size-20);
+      max-width: 100%;
+      border-radius: var(--sys-shape-corner-small);
+      border: 1px solid var(--sys-color-neutral-outline);
+      width: fit-content;
+      vertical-align: bottom;
+    }
   }
 }
 
@@ -501,6 +505,10 @@
     content: '';
   }
 
+  summary {
+    border-radius: var(--sys-size-6);
+  }
+
   .step-details {
     padding: 0 var(--sys-size-5) var(--sys-size-4) var(--sys-size-12);
     display: flex;