33800 Docs

← Retour

Proposition : Correction CSS page Shortlinks

Date : 08-01-2026 18:30 Status : IMPLEMENTEE Type : Bug fix Fichiers concernés :

Problème

La page shortlinks.html présente un problème d'affichage : les boutons/cartes s'enchaînent verticalement sans style de grille.

Causes identifiées

  1. Classe .shortlinks-grid non définie dans style.css

    • Utilisée aux lignes 120, 170, 250, 320, 380, 430
    • Sans définition, les éléments s'affichent en mode block (un sous l'autre)

  2. Variables CSS incompatibles dans les styles inline :

    • Page utilise : --spacing-xl, --spacing-md, --spacing-sm, --spacing-xs
    • CSS définit : --space-xl, --space-md, --space-sm, --space-xs
    • --transition-fast n'existe pas

  3. Classe .shortlink-card sans layout de base

Solution proposée

Option A : Ajouter les styles manquants dans style.css (Recommandé)

Ajouter les styles pour .shortlinks-grid et .shortlink-card directement dans le fichier CSS global pour une meilleure maintenabilité.

/* Shortlinks Grid */
.shortlinks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

.shortlink-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text);
    transition: all 0.2s ease;
}

.shortlink-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    text-decoration: none;
}

.shortlink-icon {
    font-size: 1.5em;
    width: 40px;
    text-align: center;
}

.shortlink-info {
    flex: 1;
    min-width: 0;
}

.shortlink-name {
    font-weight: 500;
    color: var(--text-bright);
}

.shortlink-url {
    font-size: 0.8em;
    color: var(--text-muted);
    font-family: monospace;
}

.shortlink-status {
    margin-left: auto;
}

Option B : Corriger les variables inline dans shortlinks.html

Remplacer toutes les occurrences de --spacing-* par --space-* et ajouter les styles manquants en inline.

Recommandation

Option A - Plus propre et maintenable. Les styles seront disponibles pour toutes les pages futures.

Validation requise