dev.azure.com - Tweaking by sopgenorth

/* ==UserStyle==
@name           dev.azure.com - Tweaking
@namespace      github.com/openstyles/stylus
@version        1.8.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. Tweaks made to Denilson's script
@author         Denilson and Opgenorth
==/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 */
    }

    .project-header {
        height: 28px !important;
        /* Adjust to your preferred row height */
        min-height: 28px !important;
        max-height: 28px !important;
    }

    .region-header-menubar {
        height: 28px !important;
        /* Adjust to your preferred row height */
        min-height: 28px !important;
        max-height: 28px !important;
    }
    .region-header {
        height: 28px !important;
        /* Adjust to your preferred row height */
        min-height: 28px !important;
        max-height: 28px !important;
    }

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

    /* Makes Azure DevOps left side panel smaller so that you have more space to read pull requests. */
    .region-navigation.expanded {
        width: 170px;
    }

    .project-navigation {
        resize: horizontal;
    }
    /* Target sidebar items */
    a.navigation-link {
        height: 28px !important;
        /* Adjust to your preferred row height */
        min-height: 28px !important;
        max-height: 28px !important;
        overflow: hidden;
        padding-top: 2px !important;
        /* Optional: tighten vertical spacing */
        padding-bottom: 2px !important;
    }

    /* Ensure icon and text stay centered */
    a.navigation-link .navigation-icon,
    a.navigation-link .navigation-text {
        line-height: 24px !important;
    }

    .ms-Fabric.sidePane-static.with-background.root-43 {
        width: 270px;
    }
}
@-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"; */
        td,
        td * {
            max-height: 20px !important;
        }
    }
}

@-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[cC]reate(\\?.*)(#.*)?") {
    /* 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;
    }
}
@-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;
    }
}
@-moz-document regexp("https://dev\\.azure\\.com/[^?#]*/_git/[^?#]*/branches/?(\\?.*)?(#.*)?") {
    /* "Branches" page */
    /* Make the buttons visible all the time. */
    html .bolt-table-cell-content-reveal {
        visibility: visible;
    }
}
@-moz-document regexp("https://dev\\.azure\\.com/[^?#]*/_queries/.*") {
    html .results-tree {
        /* font-family: "Roboto Condensed"; */
        td,
        td * {
            max-height: 20px !important;
        }
    }

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

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

    /*    html span.bolt-link
    {
          transform: scale(1.2);
    }*/
    /* Adjusting the g...