$remove-icon-width: 24px;
.task-relations {
padding-bottom: 1em;
&.is-narrow .columns {
display: block;
.column {
width: 100%;
}
.related-tasks {
margin-bottom: .75em;
.title {
font-size: 1em;
margin: 0;
.tasks {
a:not(.remove) {
width: calc(100% - #{$remove-icon-width});
.task {
padding: .5em;
max-width: 100%;
.different-list {
color: lighten($dark, 50);
width: auto;
.task .tasktext {
width: calc(100% - .25rem); // Magic .25rem extra space
.remove {
width: $remove-icon-width;
text-align: center;
.none {
font-style: italic;