Todoist: Wider Task Details Modal v1.2.0

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)
Task list and header: Filling all but 80px either side of the main panel, centred, and keeping Todoist's default width on narrow screens

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

Style Content

/* ==UserStyle==
@name           Todoist: Wider Task Details Modal
@namespace      https://www.timhilton.xyz/stylus-rules/
@version        1.2.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);
}

/* Task list: Todoist's default (800px) on narrow screens, all but 80px either side
   on wide ones. Todoist still centres the sections. */
.view_content section.section/* default 800px */
{
    max-width: max(800px, 100% - 160px);
}

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

/* Header (title and description) - same width as the sections. Its percentage is
   relative to the whole panel, not the view content, so also subtract the view
   content's 56px padding either side. Double attribute selector beats Todoist's
   two-class rule. */
div[data-testid="large-header"][data-title-area] > div/* default 800px */
{
    max-width: max(800px, 100% - 272px);
}

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

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