Line break after the task description.

[ivkorolyov]

/* Adds a line break (block element) after the task description */
.task-description::after {
    /* Inserts empty content after the element */
    content: "";
    
    /* Sets the element's display to block so it takes up the full width of the parent container */
    display: block;
    
    /* Clears floats so that the next element starts on a new line */
    clear: both;
}

[synalice]

Literally the first thing I wanted to do when I saw all this metadata on the same line and this is literally the first topic I see on this page. Nice job! 👍

And greetings from Russia, comrade :)

[ivkorolyov]

Thanks,
If you're interested, I've added some more details to the design.

/* Adds a line break (block element) after the task description */
.task-description::after {
    /* Inserts empty content after the element */
    content: "";
    
    /* Sets the element's display to block so it takes up the full width of the parent container */
    display: block;
    
    /* Clears floats so that the next element starts on a new line */
    clear: both;

    border: 1px ridge;

}


.task-description a.internal-link {
  font-weight: 500; 
}

.task-description {
   font-weight: 500;
}

.tasks-backlink a.internal-link {
    color: #000;
}

[claremacrae]

That's great - thank you for sharing it.

[ivkorolyov]

I am sharing an updated version of the code to enhance the visual appearance of the task filter.
With out short mode

With short mode

.task-description::after {

    content: "";
    display: block;
    clear: both;
    border: .72px ridge;
}
.task-description {
  font-size: 1em;
} 
.task-description a.internal-link {
  font-size: 1em;
} 
.tasks-backlink {
  font-size: 0.85em;
  margin-right: 3px;
}
.task-priority {
  font-size: 0.85em;
  margin-right: 3px;
}
.task-due {
  font-size: 0.85em;
  margin-right: 3px;
}
.task-created {
  font-size: 0.85em;
  margin-right: 3px;
}
.task-start {
  font-size: 0.85em;
  margin-right: 3px;
}
.task-scheduled {
  font-size: 0.85em;
  margin-right: 3px;
}
.task-cancelled {
  font-size: 0.85em;
  margin-right: 3px;
}
.task-done {
  font-size: 0.85em;
  margin-right: 3px;
}
.task-recurring {
  font-size: 0.85em;
  margin-right: 3px;
}
.task-onCompletion {
  font-size: 0.85em;
  margin-right: 3px;
}
.task-id {
  font-size: 0.85em;
  margin-right: 3px;
}
.task-dependsOn {
  font-size: 0.85em;
  margin-right: 3px;
}
.tasks-edit {
  font-size: 0.85em;
  margin-left: 0px;
}
.tasks-postpone {
  font-size: 0.85em;
  margin-right: 3px;
}
/*.tasks-backlink a.internal-link {
  color: #000;
}*/

.task-list-item[data-task-status-type="TODO"] .task-start[data-task-start^="future-"] span,
.task-list-item[data-task-status-type="IN_PROGRESS"] .task-start[data-task-start^="future-"] span {
    border-bottom: .9px solid #BD1414
}

.task-list-item[data-task-status-type="IN_PROGRESS"] .task-start[data-task-start="today"] span,
.task-list-item[data-task-status-type="IN_PROGRESS"] .task-start[data-task-start^="past-"] span,
.task-list-item[data-task-status-type="TODO"] .task-start[data-task-start="today"] span,
.task-list-item[data-task-status-type="TODO"] .task-start[data-task-start^="past-"] span {
    border-bottom: .9px solid #1D9049; /* Толстая линия подчеркивания */
}