/* ==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;
}
}