Do you have a website or web application that would be more readable if the style would just change a little bit? We faced the same problem at Symflower with GitLab because the names of our CI jobs are too long to be fully readable in the web interface. Instead of painfully finding out if such a change would be accepted, we fixed it for ourselves by customizing GitLab’s CSS live through the browser.
What are CSS customizations and how to create them?
CSS customizations allow you to extend and overwrite the CSS properties of a given website with your own custom CSS. This is usually done with the help of a web browser extension.
Our default browser is Chrome, and we use Stylebot for customizing websites. CSS customizations are then created by going to the page you want, in our case GitLab, opening the Stylebot extension and going to the “Code” tab at the bottom of the Stylebot panel where you can add your custom CSS. No need to press a “Save” button, your changes are saved automatically.
Making CI job names readable again
We use a specific naming scheme to name our CI jobs which has certain advantages. The downside is that those job names tend to become long, and therefore unreadable in the GitLab web interface. Since we did not want to rename our CI jobs and get rid of the naming scheme, we came up with the idea to modify the GitLab UI directly by customizing its CSS to fit our needs.
Our main problems were in the CI widget of a pull request, and in the sidebar on a job page.
To fix the former view we used the following CSS snippet.
ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.show {
width: auto;
}
.js-builds-dropdown-list > li > .ci-job-component > a > .ci-job-name-component > span.gl-text-truncate {
overflow: visible;
padding-right: 2rem;
}
The following piece of CSS fixes the sidebar on the CI job page.
.sidebar-container > .builds-container > .build-job > a > span.gl-text-truncate {
white-space: normal;
}
.sidebar-container > .blocks-container > div > span > h4.gl-text-truncate {
white-space: normal;
}
With both changes we get the following fixed views:
We are aware that there are several ways to specify the CSS to achieve the same goal, there might even be better solutions. This, however, suffices for our needs. In case you have a better solution, we are extremely curious on how you would solve this problem!
Do not forget to subscribe to our newsletter and follow us on Twitter, LinkedIn, and Facebook for getting notified on new articles about software development and software infrastructure, or if you are simply into memes.