chore(chat): minor chat style improvements

planger · planger · commit 632ed672d5a0 · 2025-03-19T17:06:02.000+01:00
Removes the focus outline appearing at the bottom of Monaco editors of code parts in the chat response and fine-tunes the margins of the actions in the chat input.
diff --git a/packages/ai-chat-ui/src/browser/style/index.css b/packages/ai-chat-ui/src/browser/style/index.css
@@ -453,7 +453,7 @@ div:last-child > .theia-ChatNode {
 .theia-ChatInputOptions {
   width: 100%;
   height: 25px;
-  padding-left: 6px;
+  padding-left: 3px;
   padding-right: 6px;
   display: flex;
   justify-content: space-between;
@@ -465,7 +465,7 @@ div:last-child > .theia-ChatNode {
 }
 
 .theia-ChatInputOptions .theia-ChatInputOptions-right {
-  margin-right: 12px;
+  margin-right: 8px;
 }
 
 .theia-ChatInputOptions .option {
@@ -508,6 +508,10 @@ div:last-child > .theia-ChatNode {
   border-radius: 4px;
 }
 
+.theia-CodePartRenderer-root .monaco-editor {
+  outline-color: var(--theia-editor-background);
+}
+
 .theia-CodePartRenderer-left {
   flex-grow: 1;
 }

Original file line number	Diff line number	Diff line change
`@@ -453,7 +453,7 @@ div:last-child > .theia-ChatNode {`
`453`	`453`	`.theia-ChatInputOptions {`
`454`	`454`	`width: 100%;`
`455`	`455`	`height: 25px;`
`456`		`- padding-left: 6px;`
	`456`	`+ padding-left: 3px;`
`457`	`457`	`padding-right: 6px;`
`458`	`458`	`display: flex;`
`459`	`459`	`justify-content: space-between;`
`@@ -465,7 +465,7 @@ div:last-child > .theia-ChatNode {`
`465`	`465`	`}`
`466`	`466`
`467`	`467`	`.theia-ChatInputOptions .theia-ChatInputOptions-right {`
`468`		`- margin-right: 12px;`
	`468`	`+ margin-right: 8px;`
`469`	`469`	`}`
`470`	`470`
`471`	`471`	`.theia-ChatInputOptions .option {`
`@@ -508,6 +508,10 @@ div:last-child > .theia-ChatNode {`
`508`	`508`	`border-radius: 4px;`
`509`	`509`	`}`
`510`	`510`
	`511`	`+.theia-CodePartRenderer-root .monaco-editor {`
	`512`	`+ outline-color: var(--theia-editor-background);`
	`513`	`+}`
	`514`	`+`
`511`	`515`	`.theia-CodePartRenderer-left {`
`512`	`516`	`flex-grow: 1;`
`513`	`517`	`}`