dev.azure.com - Tweaking by denilsonsa

/* ==UserStyle==
@name           dev.azure.com - Tweaking
@namespace      github.com/openstyles/stylus
@version        1.9.2
@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;
    }
    /* Always display the button to copy the branch name. */
    html .bolt-table-cell-content-with-link .branch-copy-button {
        visibility: visible;
    }

    /* Don't limit the width of a PR description. Specially useful when editing it to add URLs. */
    html .repos-pr-description {
        max-width: none;
    }

    /* The sidebar (called master panel) has a fixed size. Let's make it resizeable. */
    /* It's shown on the log output of each step of a pipeline run. It's probably also used elsewhere. */
    html .bolt-master-panel {
        resize: horizontal;
    }

    /* Unrestricting the height of the markdown comment box. (e.g. in work items) */
    /* It's stupid to force an internal scrollbar in the element when the viewport is tall enough that could fit the whole element. */
    html .markdown-comment-editor.enter-new-comment {
        max-height: none;  /* was 500px */
    }
}
@-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;
    }

    /* Full screen mode still leaves a lot of useless stuff visible. */
    html body.full-screen-mode .global-message-banner {
        display: none;
    }
    html body.full-screen-mode .bolt-page > .bolt-header {
        padding-top: 0;  /* was 24px */
    }
    html body.full-screen-mode .bolt-page .page-content-top {
        padding-top: 0;  /* was 16px */
        padding-bottom: 0;  /* was 16px */
    }
}

@-moz-document regexp("https://dev\\.azure\\.com/[^?#]*/_sprints/taskboard/.*") {
    /* "Sprints" taskboard page (i.e. the kanban view of the work items and tasks inside a sprint) */
    /* Similar pain points as the main Boards page. */

    /* Avoid useless horizontal scrolling. */
    html div.sticky-table.full-height.full-width > table.sticky-table {
        width: auto !important;  /* was 100% defined at style="" attribute */
    }

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

    /* Flexible card width. */
    html td.taskboard-expanded-cell > div.flex-column > div.flex-row {
        /* justify-content: space-evenly; */
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
        gap: 4px;
    }
    html td.taskboard-expanded-cell .wit-card.taskboard-card {
        /* flex: 1 1 auto; */
        margin: 0;  /* was 4px 4px 8px 8px */
        width: auto;  /* was 186px */
    }

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

    /* Smaller "Parent" label. It does not need to take up 40% of the width of the little card. */
    html .wit-card.taskboard-card .card-content .fields .field-container > .label {
        width: auto;  /* was 40% */
    }
    html .wit-card.taskboard-card .card-content .fields .field-container > .value {
        width: auto;  /* was 60% */
    }

    /* Hiding useless state. We already know the state due to the column. */
    html td.taskboard-expanded-cell .wit-card.taskboard-card .card-content .work-item-state-container {
        display: none;
    }

    /* Full screen mode still leaves a lot of useless stuff visible. */
    html body.full-screen-mode .global-message-banner {
        display: none;
    }
    html body.full-screen-mode .bolt-page > .bolt-header {
        padding-top: 0;  /* was 24px */
    }
    html body.full-screen-mode .bolt-page .sprints-header-dates.margin-top-8 {
        margin-top: 0;  /* was 8px */
    }
    html body.full-screen-mode .bolt-page .page-content-top {
        padding-top: 0;  /* was 16px */
        padding-bottom: 0;  /* was 16px */
    }
    html body.full-screen-mode .bolt-page .page-content-top .padding-vertical-16 {
        padding-top: 0;  /* was 16px */
        padding-bottom: 0;  /* was 1...