How do I increase the font size of copilot chat?

[Iroegbu1]

Select Topic Area

Question

Body

Please, how can I increase the font size of the chat responses, it's currently too tiny at about 12px.

[RustingSword]

A quick workaround is to zoom in the whole UI of vs code, then adjust the font size of editor/terminal etc. accordingly. See https://stackoverflow.com/a/51464582

[Iroegbu1]

You're the real MVP.

[Akash1134]

Thank you for sharing this. ❤️

[Akash1134]

Hi @Iroegbu1 ,

GitHub Copilot X is currently a representation of GitHub’s vision for the future rather than an available product offering of GitHub Copilot. As we continue to design, test, and build features that fall into the GitHub Copilot X vision, we are also taking the time to determine the best way to provide them to our customers.

Changing the size of the Chat window is not customizable at this point, I have shared this with the team internally.

Thanks!

[Iroegbu1]

Hi @Akash1134 ,

Changing the size of the Chat window

The font size...

The size of the chat window is currently resizeable.

[jnilla]

All of that double speech just to say the feature is not available. come on dude.

[pvsnp-hash]

Hi! If you go to settings and past: chat.editor.fontSize in the seach bar you will find the setting that controls the font size.

[ahelmi365]

This increases the font size of the code snippet only, but it does not increase the font size of the other text in the chat response!

[ohnotnow]

Could this get looked at relatively soon? I have terrible eyesight and am currently having to use the accessibility tools on my machine to read what copilot is writing. The chat.editor.fontSize setting only seems to change the code-snippet font - which somehow makes it all the worse.

[Zephni]

I am having the same problem, the chat editor font size only changes the code snippet font size, not the entire chat text itself. I personally am really struggling to see it so I have to copy out the text into notepad to see the text 😂

[tit006]

Looks like the problem still exists.

[ibehnam]

Is there any updates about this? The Copilot font size is painfully small.

[jackson-jackson]

Please fix asap.

[cloudbring]

Github Chat is a feature I use every day for work since it started. I get that it's experimental but, it's killing me, slowly, to have to look at TINY text.

[Lanznx]

this is so painful that i wrote a song, please, someone fix the damm feature

In the world of code, where ideas unfold,
There's a tool we use, it's bold yet old.
GitHub Copilot in VSCode, so bright,
But there's a little issue that's not quite right.

Oh, the font's too small, can't you see?
Straining our eyes, oh, set them free.
A simple fix, a wish from our heart,
Let's make Copilot Chat a more readable part.

Developers squint, in their coding chair,
Trying to read the text, it's just not fair.
Accessibility, a key we hold dear,
Adjustable fonts, let's bring them here.

Zooming in and out, it's not the way,
We need a better solution, day by day.
Eyes are tired, vision's getting blurry,
A simple font adjust, in a hurry!

Oh, the font's too small, in our coding spree,
A tweak in settings, how hard can it be?
Increase the size, for clarity's sake,
A comfortable read, for productivity's wake.

From light to dark, in every theme,
Let's make Copilot's text a readable dream.
For all who code, in day and night,
Adjustable fonts will make it right.

In the world of code, where we all strive,
Let's make our tools, help us thrive.
GitHub Copilot, hear our song,
Adjustable fonts, it won't be long!

wrote by ChatGPT

[Nik-at-Boolee]

Any updates on this one?

[aaronedev]

it cant be that hard to change the font-size of those windows - could we please get a fix? this is painful ☠

[ryandward]

Seems like it got worse recently

[opptimus]

I want to know when we can change the font size

[datanetai]

There is an old similar issue for font size change in vscode repo and it is been open since 2015!
microsoft/vscode#519

[aaronedev]

lmao no way haha

[ntc2]

More potential workarounds in the related issue mentioned in another comment: microsoft/vscode#519 (comment)

[aaronedev]

More potential workarounds in the related issue mentioned in another comment: microsoft/vscode#519 (comment)

thanks for sharing

[itseffi]

Any updates?

[kradyy]

I struggled with this myself and figured i'd shared a workaround i found that makes this possible without having to alter zoom levels and such - however, it does requires you to install a plugin - if you don't mind doing that, here are my steps!

1. Head over to the extension panel and search for "Custom CSS and JS" - install it and reload vscode
2. Now, create a css file on your computer (ie. editor.css) - preferably in a shared folder to be able to access it on different computers
3. Put the following contents into it (whereas 16px is your desired font size for the side panel):
   .pane-composite-part.right .content * { font-size: 16px !important; }
4. Open your settings.json and add a uri path for the file:
   "vscode_custom_css.imports": ["file:///Users/kradyy/Google%20Drive/vscode/editor.css"]
5. Hit ⌘ + P (Mac) or CTRL + P (Windows) and look for "Enable Custom JS and CSS"
6. Restart vscode and voila - your font-size should now have been adjusted on your right sidebar

[LaeekAhmed]

thanks a lot, just a few things to note If it doesn't work right out of the box:

• Read the extension description
• Use left instead of right in the css code file if the chat panel is in the left side bar

[alexaldearroyo]

That's a very good workaround so far. Thanks for sharing!

[mo-ian-watkins]

Any news on this please?

[gbsr]

Updates?

[siliconcoding]

Updates?

[0xrishavsharma]

Any update on this?

[szelonkaMS]

Please fix this.

[alexaldearroyo]

I'd like to join the request.

[mariushx]

Until they find time to fix this we have to go by manually editing the CSS file.
Locate workbench.desktop.main.css. On a default installation the file resides in C:\Users{user}\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench. Add these values at the end of the file and save.

:root {
  /* you can change these values */
  --vscode-copilot-chat-font-size: 16px; 
  --vscode-copilot-chat-font-family: Consolas, monospace;
  --vscode-copilot-chat-user-font-size: calc(var(--vscode-copilot-chat-font-size) - 3px);
}
.monaco-tl-contents .username {
  font-size: var(--vscode-copilot-chat-user-font-size) !important;
}
.monaco-button.interactive-followup-reply.monaco-text-button {
  font-size: var(--vscode-copilot-chat-font-size) !important;
}
.interactive-session .interactive-input-and-execute-toolbar .monaco-editor .mtk1,
.interactive-session .interactive-session-followups code {
  font-size: var(--vscode-copilot-chat-font-size) !important;
}
.interactive-item-container .monaco-tokenized-source, 
.interactive-item-container code{
    background-color: var(--vscode-textPreformat-background);
    border-radius: 4px;
    color: var(--vscode-textPreformat-foreground);
    font-family: var(--vscode-copilot-chat-font-family);
    font-size: var(--vscode-copilot-chat-font-size) !important;
    padding: 1px 3px;
}
.interactive-item-container .value > .rendered-markdown h3,
.interactive-item-container .value > .rendered-markdown p,
.interactive-item-container .value > .rendered-markdown li {
  font-size: var(--vscode-copilot-chat-font-size) !important;
  line-height: 1.5em !important;
}

Now if you are like me and you like to have font consistency across panels you should also set in settings.json file:
"window.zoomLevel": 0
"editor.suggestFontSize": 0
You should be set now.

[aaronedev]

thanks the best workaround probably

[consvs]

This is awesome! However, hopefully there will be specific setting to change the font size directly.

@laurensiusadi Did you manage to get rid of the warning? For now I just told vscode to never show this message again... 👎

[laurensiusadi]

@consvs Yeah same, just click never show.

[LeonardoRick]

@mariushx thanks for sharing. The path for mac users would be

/Applications/Visual Studio Code App.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css

Btw, do you have the styles to increase this part as well?

[NicHub]

On my Mac the path is:

"/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css"

[MohammedNadeemR]

response 1

[mariushx]

If you don't mind having to zoom in the window, yes.

[tomx-sh]

Any updates ?
The chat font is too small, it is as small as UI elements (like buttons) - but the chat is not UI, it is actual content!

[zoonose]

This is untested beyond what you see here - so beware of false hope - but I just asked copilot to write all its messages in code blocks (which are affected by chat.editor.fontSize, etc), and ...

// Understood. I will format all my messages like this from now on. 
// No code to execute here, just setting the format for future messages.

... :D !

[aaronedev]

well :D

[aaronedev]

i don't believe in microsoft ever delivering this update - i only believe in jesus christ 🧔🧔‍♂️✝️

[ajain-1]

There's a much simpler workaround. You can open chat in a new window (using the 3 dots in the top right of it), and then zoom in for just that window. This leaves the editor and everything else unaffected, it just zooms in for the chat window. You can then put the chat window alongside your editor as normal.

[LeonardoRick]

When I click "Open chat in sidebar" again, the increased zoom is lost and the font size returns to the default small font.

[ajain-1]

When I click "Open chat in sidebar" again, the increased zoom is lost and the font size returns to the default small font.

Yeah, don't open the chat in the sidebar, open it in a new window and you can zoom in/out independently

[movy]

I still have to use ChatGPT on web because of the minuscule font in sidebar chat. Are all Copilot devs on 85'' screens and this issue does not bother them at all?

[FindLeo]

I tried "ctrl +"
This will change all font but you can adjust the editor accordingly.