fix(popup): truncate long domain names with ellipsis in exceptions list

[Copilot]

Long domain names in the whitelist overflow their container, pushing the "Supprimer" button out of the visible popup area and making it inaccessible.

Changes

• popup.css — two new targeted rules:
  • li > span: truncates domain text with text-overflow: ellipsis; min-width: 0 is required to allow the flex item to shrink below its intrinsic content width
  • li > button: flex-shrink: 0 keeps the delete button at its natural width regardless of sibling size

li > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* flex items default to min-width: auto; this allows shrinking */
}

li > button {
  flex-shrink: 0;
}

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Débordement de texte dans la liste des exceptions pour les domaines longs</issue_title>
<issue_description>## Contexte
La popup de l'extension affiche la liste des domaines autorisés (liste blanche) via des éléments de liste (<li>) contenant un libellé (<span>) et un bouton de suppression.

Problème

Lorsqu'un domaine avec un nom très long ou de nombreux sous-domaines est ajouté à la liste, le texte déborde du conteneur parent. Cela pousse le bouton "Supprimer" hors de la zone visible de la popup, rendant la suppression du domaine impossible sans redimensionner manuellement l'interface.

Scénario de Reproduction

1. Naviguer sur un site avec un domaine long (ex: un-tres-long-sous-domaine.exemple-de-site-web-tres-long.com).
2. Ouvrir la popup TruePath.
3. Cliquer sur "Ajouter le domaine courant".
4. Observer l'affichage dans la liste en bas de la popup.

Comportement Attendu

Le texte du domaine doit être tronqué avec des points de suspension s'il dépasse l'espace disponible, et le bouton "Supprimer" doit rester ancré et visible à droite de l'élément.

Pistes Techniques

Fichier concerné : popup.css.
Appliquer les propriétés suivantes sur le span contenant le nom de domaine :

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Ajuster la propriété flex de l'élément li pour garantir que le bouton conserve sa largeur fixe.

Environnement

Firefox 115+ (Tous les OS)</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Débordement de texte dans la liste des exceptions pour les domaines longs #69

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Copilot]

Pull request overview

This PR aims to prevent long exception domain names from overflowing the popup UI by truncating them with an ellipsis so the “Supprimer” button remains accessible.

Changes:

• Add li > span CSS to clamp domain text to one line and truncate with text-overflow: ellipsis (including min-width: 0 for flex shrink).
• Add li > button { flex-shrink: 0; } to keep the delete button from shrinking.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

li > button { flex-shrink: 0; } interacts badly with the existing global button { width: 100%; } rule in this same stylesheet: the “Supprimer” button inside list items will try to stay full-width and the domain text may collapse to ~0 width (so ellipsis never appears), or the row will overflow. Fix by overriding the list-item button sizing (e.g., set li > button width to auto and remove the global margins), or by scoping the global button { width: 100% } rule to only the top-level action buttons (#add-domain/#clear-domains).