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

← Back to Stylus Rules

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