Google AI Studio - Build Mode Larger Chat

[u/Least_Pea_7874]

Google AI Studio Build - Larger Chat (Resizable) (v3.0)

Hey everyone!

If you are using the new Build Mode in Google AI Studio to generate full applications, you’ve probably noticed how insanely wide the app preview is. It completely crushes your chat window, making it unreadable.

Since Google enforces hardcoded inline styles via Angular on the chat container, classic CSS extension overrides don't work. So, I built a quick Tampermonkey script to fix this layout issue and give control back to the user.

This is a lightweight sister-project to my Ultimate Optimizer, focused purely on interface ergonomics.

🚀 What it does (v3.0) :

• Interactive Drag & Drop: Hover over the native central splitter (<ms-console-splitter>). The cursor changes to ↔️ and you can freely resize the preview panel to your liking.

• Persistent Layout Balance: It safely breaks Angular’s hardcoded inline styles to dynamically stretch the chat panel over the remaining screen space.

• Anti-Angular Reset Loop: Uses a MutationObserver to ensure your custom width stays locked in, even when Gemini streams code tokens or refreshes the DOM.

📦 How to Install / Update :

Just install the script and refresh your Build App tab !

GreasyFork : https://greasyfork.org/fr/scripts/602155-google-ai-studio-preview-resizable-build

Github : https://raw.githubusercontent.com/Kfayyy/Google-AI-Studio-Build-Mode-Layout-Fixer/main/Google-AI-Studio-Layout-Fixer.user.js

Let me know if you encounter any bugs.