[ENHANCEMENT] Adjust the font size in Zoo Code extension #157

Activity

1. duvw

   added

   enhancementNew feature or requestNew feature or request

   on May 17, 2026
2. duvw commented on May 18, 2026

   

   duvw

   on May 18, 2026

   Last edited by duvw

   Author

   More actions

   Now, users can only solve this by changing the css style themselves.

   vi ~/.vscode/extensions/zoocodeorganization.zoo-code-3.54.1/webview-ui/build/assets/index.css 

   /* Change part of the text font size settings of the file */
   --text-xs:calc(var(--vscode-font-size)*.9);
   --text-xs--line-height: calc(1/0.75);
   --text-sm: calc(var(--vscode-font-size) * .95);
   --text-sm--line-height: calc(1.25/0.875);
   
   /* Add the following code to the end of the index.css file */
   /* Custom ZooCode Chat Text Sizes */
   p,
   li,
   code,
   td, 
   th {
     font-size: calc(var(--vscode-font-size) * 1.2) !important;
     line-height: 1.5 !important;
   }
   
   /* Make code blocks inside the chat slightly larger */
   pre code {
     font-size: calc(var(--vscode-font-size) * 1.2) !important;
   }
   /* Fix the "Type a message..." Input Box (Targets VS Code Shadow DOM) */
   textarea,
   vscode-text-area::part(control) {
     font-size: calc(var(--vscode-font-size) * 1.2) !important;
     line-height: 1.5 !important;
   }
   
   /* Fix the "You said" User Messages */
   .whitespace-pre-wrap,
   div[style*="pre-wrap"],
   div[style*="break-word"] {
     font-size: calc(var(--vscode-font-size) * 1.2) !important;
     line-height: 1.5 !important;
   }
3. kyr0 commented on May 18, 2026

   

   kyr0

   on May 18, 2026

   Last edited by kyr0

   More actions

   Could we maybe just implement a menu entry in the settings UI for this? Something along the lines of: "Advanced UI Customization" where we can simply paste/change the CSS? The default value could be the default CSS used by the plugin, so users have the perfect starting point. Also, a "Reset to defaults" button would be great if we do it like that.

   The elegance of this would be, that our "users" are developers. CSS isn't a complexity for them or AI is used to generate it based on prompt, given the original CSS as an example (e.g. this could be an enhancement for the future to have a text prompt field to let the model come up with the desired changes as CSS... ;)

   And implementation-wise, it's super easy as we only need to replace the existing <style> element (identified by id) when values are changed, dynamically. And initial rendering is exactly the same algo. Take the value from settings, render the <style> element with id.
4. duvw commented on May 19, 2026

   

   duvw

   on May 19, 2026

   Last edited by duvw

   Author

   More actions

   In VS Code, there are two variable used for setting font size:

   • --vscode-font-size: This is a more general variable representing the font size used in the workbench UI (e.g., sidebars, file explorers, tabs, status bar). It is mapped to the user's window.zoomLevel or the global UI font settings. It is usually hardcoded by the OS (around 13px on Mac).
   • --vscode-editor-font-size: This variable specifically targets the font size used within the code editor pane. It is mapped directly to the user's editor.fontSize setting.

   I clone the code from Zoo-Code repository and find the developer use --vscode-font-size to calculate most parts of the font size of this project. So no matter how big you set the font size in VS Code Settings, the font size within Zoo-Code never change. The only way to change the UI font size is to zoom the entire app window using Cmd +.
   

   From my perspective, those Chat/General UI components (buttons, input boxes, labels, descriptions) should set font size with --vscode-font-size. While at least the code blocks in markdown file within Zoo-Code should set font size with --vscode-editor-font-size, which will automatically update when the user changes their VS Code settings, providing a seamless "native" feel that users expect from high-quality extensions.
5. proyectoauraorg commented on May 24, 2026

   

   proyectoauraorg

   on May 24, 2026

   Contributor

   More actions

   Looking into this — adding a configurable chat font size for the Zoo Code panel, independent of VS Code's editor font. PR incoming.

   👍React with 👍2Reacted by duvw and wqzhu
6. proyectoauraorg

   added a commit that references this issue on May 24, 2026

   fix(webview): normalize nullish chatFontSize in context value (Zoo-Co…

   ...

   8696518
7. duvw commented on May 24, 2026

   

   duvw

   on May 24, 2026

   Author

   More actions

   Looking into this — adding a configurable chat font size for the Zoo Code panel, independent of VS Code's editor font. PR incoming.

   We are looking forward to the new settings feature, thanks for your efforts on this issue!👍
8. proyectoauraorg

   added 5 commits that reference this issue on May 24, 2026

   fix(settings): scope chat font size to the chat markdown surface (Zoo…

   ...

   03a1df2

   feat(settings): add configurable chat font size (Zoo-Code-Org#157)

   ...

   911199b

   fix(webview): normalize nullish chatFontSize in context value (Zoo-Co…

   ...

   48b680d

   fix(settings): scope chat font size to the chat markdown surface (Zoo…

   ...

   a046159

   feat(settings): emit telemetry for chat font size changes (Zoo-Code-O…

   ...

   e94e260
9. edelauna

   closed this as completedin #276on May 30, 2026
10. Aculnaj

    added a commit that references this issue on May 30, 2026

    feat(settings): add configurable chat font size (Zoo-Code-Org#157) (Z…

    ...

    71db2e6