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:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user