← All posts

Tutorials

Gmail and Google Workspace tweaks — less clutter, more focus

18 May 2026 · by JustZix Team

Gmail and the rest of Google Workspace do a lot, but they collect plenty of ballast along the way: a Meet panel eating the left column, the Promotions and Social tabs, a cramped message list, documents on a narrow sheet of paper in the middle of the screen. None of that can be switched off in the settings. In this guide we walk through six CSS tweaks that declutter Gmail, Calendar, Docs and Sheets — each as a ready-to-paste snippet.

Why JustZix, not Google settings

Google gives you a few density and layout toggles, but it will not let you hide the Meet panel, widen the reading pane past a fixed maximum, or change the Docs editor font. JustZix layers your CSS in the browser, scoped to a specific domain — mail.google.com, calendar.google.com, docs.google.com — so the tweaks apply right away, on any account, without installing anything on Google's side.

Gmail — hide the Meet and Chat panel

The Meet and Chat sections in the left column are rarely needed and they take space away from the label list. Hide them and reclaim the room:

/* Hide the Meet and Chat sections in Gmail's left column */
div[role="navigation"] [aria-label="Meet"],
div[role="navigation"] [aria-label="Hangouts"],
div[gh="cl"] + div [jsname] {
  display: none !important;
}

/* The label list takes over the reclaimed height */
div[role="navigation"] .aim {
  max-height: none !important;
}

If you use Chat every day, hide only Meet — drop the first line from the selector. Keep the tweak as a separate rule so it is easy to toggle.

Gmail — remove the promo tabs

The Promotions and Social tabs distract if you read everything from one inbox anyway. Hide the category bars and leave a clean list:

/* Hide the category bars (Promotions, Social) */
.aKz, .aeF .aKh,
table[role="tablist"].aKi {
  display: none !important;
}

/* Ad rows styled like messages at the top of the list */
.aKB, tr.zE[jsaction] .aKS {
  display: none !important;
}

Gmail — compact density and a wider reading pane

The default spacing between list rows is generous. Compact it to fit more messages at once, and widen the reading pane when you open a message:

/* Compact density for the message list */
.zA {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  line-height: 1.3 !important;
}

/* Wider reading window for a single message */
.nH.if, .a3s.aiL {
  max-width: 1100px !important;
}
.ii.gt {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

Gmail's class names are obfuscated and sometimes change with updates — if a rule stops working, open DevTools, point at a list row and swap in the new class name. The [role] and [aria-label] selectors are more stable than classes, so prefer them where you can.

Google Calendar — a clearer grid

The calendar grid in the week view can blur together. Sharper hour lines and a stronger "now" marker improve orientation:

/* Clearer hour lines in the week view */
.YkqOPc, [role="grid"] [role="row"] {
  border-color: rgba(0,0,0,.14) !important;
}

/* A stronger red marker for the current time */
.qLWdg, [aria-label*="Current time"] {
  border-top-width: 2px !important;
  border-color: #ea4335 !important;
}

/* Weekend columns lightly shaded */
[role="columnheader"]:nth-child(1),
[role="columnheader"]:nth-child(7) {
  background: rgba(0,0,0,.03) !important;
}

Docs and Sheets — full width and fonts

Google Docs renders a fixed-width sheet in the middle of a wide screen. For working drafts (not for print) you can stretch the text and swap the editor font:

/* Google Docs at the full window width */
.kix-page, .kix-page-paginated {
  width: 90% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* A more comfortable font and line-height in the editor */
.kix-paragraphrenderer {
  line-height: 1.6 !important;
}

/* Sheets — taller rows for readability */
.grid-table-container .row-header-wrapper {
  font-size: 12px !important;
}

Remember the width tweak is view-only — it does not change the page size when you print or export to PDF. That is intentional: you want comfortable reading on screen, while the print stays standard.

A focus mode across Workspace

The common denominator of every Google app is a heavy header and side panels. A focus-mode rule hides them when you want to write without distractions:

/* Focus mode: hides the header and side panels */
header[role="banner"],
.brC-aT5-aOt-Jw, /* Gmail toolbar */
[aria-label="Side panel"] {
  display: none !important;
}

/* Content reclaims the full window height */
[role="main"] {
  margin-top: 0 !important;
}

Keep focus mode as a separate rule and toggle it from the action bar — the header comes back with one click when you need search or the account menu.

Building the set

It is best to keep these tweaks as separate, named rules: "Gmail — no Meet", "Gmail — compact", "Calendar — grid", "Docs — full width". Each scoped to its domain, each toggled independently. Then in five seconds you fit Workspace to the task — a dense inbox in the morning, focus mode for writing in the afternoon.

Ready-made rules for Google apps are in the catalog — see the examples for mail.google.com and copy whatever fits. Install JustZix and declutter your Workspace today.