better CSS for image URLs and images in Thought Process and Supporting Content

Author: pamelafox

.github/chatmodes/fixer.chatmode.md

@@ -33,4 +33,5 @@ If you are running Python scripts that depend on installed requirements, you mus
 ## Committing the change
 
 When change is complete, offer to make a new branch, git commit, and pull request.
+(DO NOT check out a new branch unless explicitly confirmed - sometimes user is already in a branch)
 Make sure the PR follows the PULL_REQUEST_TEMPLATE.md format, with all sections filled out and appropriate checkboxes checked.

app/frontend/src/components/AnalysisPanel/AnalysisPanel.module.css

@@ -7,8 +7,11 @@
 
 .tList {
     padding: 1.25em 1.25em 0 1.25em;
-    display: inline-block;
+    display: block; /* allow it to shrink within container */
     background: #e9e9e9;
+    width: 100%;
+    box-sizing: border-box;
+    overflow-wrap: anywhere; /* aggressive wrapping for very long tokens/urls */
 }
 
 .tListItem {
@@ -53,6 +56,12 @@
 
 .tCodeBlock {
     max-height: 18.75em;
+    overflow: auto;
+    white-space: pre-wrap; /* allow wrapping */
+    word-break: break-word;
+    overflow-wrap: anywhere;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .tPropRow {
@@ -71,6 +80,7 @@
     margin-bottom: 0.3em;
     word-break: break-word;
     white-space: normal;
+    overflow-wrap: anywhere;
 }
 
 .citationImg {

app/frontend/src/components/AnalysisPanel/ThoughtProcess.tsx

@@ -18,11 +18,7 @@ interface Props {
 // Helper to truncate URLs
 function truncateImageUrl(val: string) {
     if (typeof val === "string" && val.startsWith("data:image/")) {
-        // Show only the first 30 chars and add ellipsis
         return val.slice(0, 30) + "...";
-    } else if (typeof val === "string" && val.startsWith("http")) {
-        const blobIndex = val.indexOf(".blob.core.windows.net/");
-        return blobIndex !== -1 ? ".../" + val.slice(blobIndex + ".blob.core.windows.net/".length) : val;
     }
     return val;
 }

app/frontend/src/components/SupportingContent/SupportingContent.module.css

@@ -30,4 +30,8 @@
 
 .supportingContentItemImage {
     object-fit: contain;
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 0 auto; /* center if narrower */
 }