fix(displays): keep primary-display star visible on long monitor names

Wrapping overflow:hidden + ellipsis on the parent flex container
clipped the favourite star whenever the monitor name was long enough
to truncate. Move the truncation rules onto a new inner span around
the name text only, and add flex-shrink:0 to the badge so it always
renders in full.
This commit is contained in:
2026-05-01 19:40:12 +03:00
parent d27484a46d
commit 372e4eb11f
+1 -1
View File
@@ -71,7 +71,7 @@ export async function loadDisplayMonitors() {
<path fill="currentColor" d="M20 3H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h6v2H8v2h8v-2h-2v-2h6c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H4V5h16v10z"/> <path fill="currentColor" d="M20 3H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h6v2H8v2h8v-2h-2v-2h6c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H4V5h16v10z"/>
</svg> </svg>
<div class="display-monitor-info"> <div class="display-monitor-info">
<span class="display-monitor-name">${monitor.name}${primaryBadge}</span> <span class="display-monitor-name"><span class="display-monitor-name-text">${monitor.name}</span>${primaryBadge}</span>
${detailsHtml} ${detailsHtml}
</div> </div>
${powerBtn} ${powerBtn}