Dashboard manual buss card - row distance problem

Configuration Frontend
1

Hi!

I’m new to this and have tried to solve it with Copilot but can’t come any further. I want to make a dashboard component that shows the next busses on my stop. It’s almost done, but somehow there are lots of ”air” between the rows (each buss). How do I fix this?

type: markdown
content: >
  ## Avgångar Björnbodaskolan  
  {% set deps = state_attr('sensor.bjornbodaskolan_avgangar_radata', 'departures') %}
  {% if deps %}
    {% for d in deps %}
      {% set rt = as_datetime(d.realtime) %}
      {% if rt.tzinfo == none %}
        {% set rt = rt.replace(tzinfo=now().tzinfo) %}
      {% endif %}
      {% set now_aware = now().astimezone() %}
      {% set mins = ((rt - now_aware).total_seconds() / 60) | int %}
      {% set färg = '🟥' if mins < 2 else '🟧' if mins < 5 else '🟩' %}

      {{ d.route.designation }} → {{ d.route.direction }} — {{ färg }} {{ mins }} min{% if d.delay > 0 %} (+{{ d.delay }}s){% endif %}  
    {% endfor %}
  {% else %}
    Inga avgångar just nu  
  {% endif %}

IMG_0656
IMG_0656873×2363 77.6 KB

2

Put it in a HTML table, then you will also have it easier with control the width and signing the text.

If you want to go for her with your current solution, then the issue is the linebreaks after the {% %} and {{ }}.
They are not inside the brackets so they stay.
You can put it all in one line instead, but that might make it pretty unreadble, so Jinja have another solution.

Using {%-, -%} , {{- and -}} will remove whitespaces like line breaks before or after the brackets.
You do not have to use a minus in both start and stop bracket. You can use only one of you want to only have the effect in that end.

3

Thanks a lot! The - did it. Then even trettier with HTML table