dev.azure.com - Tweaking by denilsonsa

/* ==UserStyle==
@name           dev.azure.com - Tweaking
@namespace      github.com/openstyles/stylus
@version        1.5.0
@description    Several tweaks to the Azure DevOps website to make it more usable for me. These changes may or may not be relevant to you or to your organization.
@author         Denilson
==/UserStyle== */

@-moz-document domain("dev.azure.com") {
    /* At the file tree panel, the filename is cropped even though there is empty space. The space is for a hidden three-dots button. Let's make it overflow anyway. */
    table.repos-file-explorer-tree td.bolt-list-cell {
        overflow-x: visible;
    }

    /* Don't make scrollbars thin. It decreases usability making it extremely hard to click/drag the scrollbar handle. */
    .custom-scrollbar {
        scrollbar-width: unset; /* was thin */
    }
    
    /* Always display the button to copy the branch name to the clipboard. Less surprising, and avoids re-flowing the text on mouse-over. */
    html .pr-secondary-title-row .repos-pr-source-branch-clipboard-button,
    html .pr-secondary-title-row:hover .repos-pr-source-branch-clipboard-button {
        visibility: visible;
        display: inline;
    }
    
    /* Don't limit the width of a PR description. Specially useful when editing it to add URLs. */
    html .repos-pr-description {
        max-width: none;
    }
}
@-moz-document regexp("https://dev\\.azure\\.com/[^?#]*/_build($|[?#].*)") {
    /* "Pipelines" page (list of CI pipelines) */

    /* The list of pipelines has a default width for each column. However, this width is too short for our pipeline names. */
    table.bolt-table.bolt-table-show-lines.bolt-list > colgroup > col[style*="340px"] {
        width: 500px !important;
    }
}

@-moz-document regexp("https://dev\\.azure\\.com/[^?#]*/_workitems/edit/[0-9]+/?($|[?#].*)") {
    /* "Work Item" page (e.g. User Story) */

    /* Increasing the height of user story descriptions. */
    .html-editor.auto-grow .rooster-wrapper,
    .html-editor.auto-grow .rooster-wrapper .rooster-editor {
        max-height: none;
    }
    /* Let the whole page scroll, instead of just this element. */
    html body,
    html body > .full-size,
    html body > .full-size > .full-size,
    html body > .full-size > .full-size > .full-size,
    html body > .full-size > .full-size > .full-size > .full-size,
    html body > .full-size > .full-size > .full-size > .full-size > .full-size,
    html body .work-item-form-page-content.page-content {
        overflow: unset;
    }
    
    /* The related work items are always too small and I can't read the whole text */
    html a.artifact-link-link.h-scroll-hidden.text-ellipsis {
        white-space: normal;
    }
    
    /* Adjusting the grid on smaller windows. Using just two columns instead of three columns. */
    @media screen and (max-width:1023px) {
        .work-item-grid.first-column-wide {
            /* Two columns, the first one is wider. */
            grid-template-columns: 3fr 1fr;
        }
        .work-item-grid .work-item-form-right {
            /* Instead of ending at the column-line 4, let's end at the column-line 3. */
            grid-column-end: 3;
        }
        .ms-CommandBar-primaryCommands {
            /* To prevent the toolbar from changing width on every keystroke. */
            flex-wrap: wrap;
        }
    }
}

@-moz-document regexp("https://dev\\.azure\\.com/[^?#]*/_backlogs/backlog/.*") {
    /* "Backlog" page */

    /* It is stupid to hide important things that can be interacted with. */
    html .bolt-table-cell-content-reveal {
        visibility: visible;
    }
    /* By default this is a 8px-column that contains a 10px element with 5px margin. WHY? */
    html table.backlog-tree.bolt-table.bolt-list > colgroup > col[style*="8px"]:first-child {
        width: 20px !important;
    }
    html table.backlog-tree {
        /* font-family: "Roboto Condensed"; */
    }
}

@-moz-document regexp("https://dev\\.azure\\.com/[^?#]*/_boards/board/t/.*") {
    /* "Board" page (i.e. the kanban view of the work items) */
    /* It was very annoying and painful to use for me. */

    /* Less padding, less empty space please. */
    html .wit-card .card-content {
        padding: 4px;  /* was 12px */
    }
    html .wit-card .card-content .tags-list.margin-top-8 {
        margin-top: 0;  /* was 8px */
    }
    html .wit-card .card-content .tags-list > div > .margin-bottom-8 {
        margin-bottom: 0;  /* was 8px */
    }
    html .wit-card .card-content .tags-list .bolt-pill-content {
        padding: 0;  /* was 2px 0px */
    }

    /* Smaller "assigned to" rendering. Just the picture should be enough. */
    html .wit-card .card-content .editable-card-identity-picker.is-identity {
        min-height: 0;
    }
    html .wit-card .card-content .editable-card-identity-picker.is-identity .identity-view.card-assigned-to {
        position: absolute;
        right: 4px;
        bottom: 4px;
    }
    html .wit-card .card-content .editable-card-identity-picker.is-identity .identity-view.card-assigned-to .identity-display-name {
        display: none;
    }

    /*
    Hiding useless fields:
    - Iteration Path
    - Created Date
    - Parent
    Please, let me focus on what is important.

    This section may or may not be relevant to your board at your organization.
    */
    html .card-content > div:nth-child(2) > div.fields {
        display: none;
    }
    /*
    The following selector has one issue: since it's only matching descendants
    of .kanban-board, it doesn't match cards being dragged with the mouse.
        html .kanban-board .card-content > div:nth-child(2) > div.fields
    */

    /* The related work items are always too small and I can't read the whole text */
    html .artifact-link-link.text-ellipsis {
        white-space: normal;
    }
}

@-moz-document regexp("https://dev\\.azure\\.com/[^?#]*/_git/[^?#]*/pull[rR]equest/[0-9]+(\\?.*)?(#.*)?") {
    /* "Pull Request" page */
    
    /* The related work items are always too small and I can't read the whole text */
    html .region-pullRequestDetailsOverviewExtensions a.bolt-link > span.text-ellipsis {
        white-space: normal;
    }

    /* These buttons are hidden until mouse-over or focus. Let's make them always visible. */
    html .repos-pr-title-row .repos-pr-title-clipboard-button {
        visibility: visible;
    }
    html .repos-discussion-comment .repos-discussion-comment-auto-hide-button {
        opacity: 1;
    }

    /* The textarea fields must use a monospace font, otherwise it is impossible to manually edit Markdown tables. */
    html textarea.bolt-textfield-input {
        font-family: monospace;
    }
}