Todoist: Wider Task Details Modal latest version (currently v1.2.0)

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%;
}
}