Todoist: Wider Task Details Modal v1.1.0

← Back to Stylus Rules

Increases the width of task details modal and view content in Todoist for better visibility on wide screens.

What it does

This style rule makes Todoist more usable on wide monitors by:

  • Modal width: Expanding the task details modal to use 70% of viewport width (minimum 1000px)
  • View content: Increasing view header and content width to 80% (minimum 1000px)
  • List spacing: Removing width constraints and adding comfortable margins to sections

This allows you to see more task details and content without unnecessary scrolling or wasted screen space.

Install Style

Style Content

/* ==UserStyle==
@name           Todoist: Wider Task Details Modal
@namespace      https://www.timhilton.xyz/stylus-rules/
@version        1.1.0
@description    Increases the width of task details modal and view content in Todoist for better visibility on wide screens
@author         Tim Hilton using Claude
@homepageURL    https://www.timhilton.xyz/stylus-rules/todoist/wider-task-details-modal/
@updateURL      https://www.timhilton.xyz/stylus-rules/todoist/wider-task-details-modal/latest/wider-task-details-modal.user.css
==/UserStyle==*/

@-moz-document domain("todoist.com") {
div.reactist_modal_box.detail_modal/* default 650px */
{
    max-width: max(70%, 1000px);
}

div.view_content/* default 800px */
{
    max-width: max(80%, 1000px);
}

/* Header (title and description) - match the sections below: offset by the view
   content's 56px padding plus the section margin, width of the view content minus
   its padding. Double attribute selector beats Todoist's two-class rule. */
div[data-testid="large-header"][data-title-area] > div/* default 800px */
{
    max-width: calc(max(80%, 1000px) - 112px);
    margin-left: calc(56px + 5vw);
    margin-right: auto;
}

*[data-testid="task-details-modal"] {
    width: min(80%, 1500px) !important;
}

.reactist_menulist[role=menu] {
    max-width: 100%;
}

.view_content section.section {
    margin-left: 5vw;
    margin-right: 5vw;
}

.view_content .list_holder,
.view_content .section {
    max-width: none;
}
}