Todoist: Wider Task Details Modal v1.0.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.0.0
@description    Increases the width of task details modal and view content in Todoist for better visibility on wide screens
@author         Tim Hilton
@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,
header.view_header div.view_header__content/* default 800px */
{
    max-width: max(80%, 1000px);
}

*[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;
}
}