sometimes missing lines in nested q-timeline

[dannyb2018]

What happened?

Was attempting to have a timeline within a timeline - in my case was a list of orders and within each order timeline entry a timeline of updates. Sometimes there was be a line between the dots and sometimes there wasnt. I have made the simplest example of when this happens. Basically if there is a timeline-entry below then the line shows up in the nested timeline and if there is not then it doesnt

What did you expect to happen?

I am expecting each timeline, both external and nested to show lines between dots

Reproduction URL

https://jsfiddle.net/36pxf9y5/

How to reproduce?

Flavour

UMD

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[FangHanZreo]

The reason for this issue is the CSS selector .q-timeline__entry:last-child .q-timeline__dot:after. This selector sets content: none;, causing all .q-timeline__dot elements in the second level to lose their timeline. To quickly resolve this issue, you can add the following global CSS code:

// add a line after the dot
.q-timeline__entry:last-child .q-timeline__dot:after {
  content: '' !important;
}

// for the last child of the timeline, remove the line after the dot
.q-timeline__entry:last-child > .q-timeline__dot:after {
  content: none !important;
}

The q-timeline component seems not to have considered nested usage, which led to this issue.