Skip to content

Instantly share code, notes, and snippets.

@mahalel
Created April 19, 2026 22:35
Show Gist options
  • Select an option

  • Save mahalel/3f15bafdb88a2dd19e09ba38a9ee4393 to your computer and use it in GitHub Desktop.

Select an option

Save mahalel/3f15bafdb88a2dd19e09ba38a9ee4393 to your computer and use it in GitHub Desktop.
Wide Gemini
// ==UserScript==
// @name Wide & Outdented Left Prompt Gemini
// @namespace Violentmonkey Scripts
// @match https://gemini.google.com/*
// @grant GM.addStyle
// @version 1.5
// @author mahalel
// @description Wide tables/code and pulls user prompts strongly to the left, outdenting them from the main chat.
// ==/UserScript==
GM.addStyle(`
/* 1. Main container - Wide and Centered */
.conversation-container {
max-width: 1900px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 95% !important;
padding-left: 20px !important; /* Base padding for model response */
}
/* 2. Setup the flex container that holds both User and Model messages */
.conversation-container > div,
div[_ngcontent-ng-c152325880] {
display: flex !important;
flex-direction: column !important;
}
/* 3. USER PROMPT: STAND OUT "OUTDENT" TO THE LEFT */
user-query {
align-self: flex-start !important;
width: auto !important;
max-width: 70% !important; /* Cap the width of the bubble */
/* THE MAGIC: Move the prompt OUTSIDE the standard conversation width */
margin-left: -500px !important; /* Drastically "outdents" the prompt to the left */
margin-right: auto !important;
margin-bottom: 30px !important; /* Add space between prompt and model response */
/* Optional visual pop */
border-left: 4px solid #A2A9B0 !important; /* Adds a visual anchor on the left edge */
}
/* Styling the inner user bubble for clear distinction */
.user-query-bubble-with-background {
background-color: rgba(162, 169, 176, 0.15) !important; /* Stronger tint for "You said" */
color: #FFF !important; /* Brighten text */
border-radius: 12px !important;
padding: 16px 24px !important;
display: block !important;
}
/* 4. MODEL RESPONSE: Still fills the width and is centered */
model-response {
align-self: flex-end !important; /* Aligns the entire model container slightly right for contrast */
width: 100% !important;
}
/* Ensure the model response remains wide and can use the space we unlocked */
.container,
structured-content-container,
.horizontal-scroll-wrapper,
.table-block {
width: 100% !important;
max-width: 100% !important;
}
`);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment