Le seul petit problème avec le code scss, il n’y a pas de retour à la ligne automatiquement donc les mots sont coupés 
Que voulez-vous dire ? Pouvez-vous envoyer une capture d’écran ?
1 « J'aime »
Ceci est un comportement intentionnel du cœur, mais si vous préférez que le nom de la catégorie passe à la ligne au lieu d’être tronqué, vous pouvez essayer :
.category-heading {
&.--has-logo {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-4);
}
&__content {
min-width: 0;
.badge-category__wrapper {
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
.badge-category {
&.--style-emoji,
&.--style-icon {
align-items: baseline;
}
}
}
}
}
3 « J'aime »
super ça fonctionne @Don tu es un chef 
1 « J'aime »
J’ai remarqué que sur la version tablette, il n’y pas la description de la catégorie mais sur mobile oui. Je pense qu’il serait judicieux de faire la même chose sur la version mobile. 
J’ai remarqué aussi, si on utilise les réponses imbriquées il y a un ptit défaut d’affichage d’avatar qui est un peu gros
Je ne sais pas si je suis le seul ?
Merci @gilles ! J’ai fusionné une mise à jour pour cela…
2 « J'aime »
J’ai testé et c’est tout bon merci @Don pour ta réactivité 
1 « J'aime »
@Don j’ai trouvé un petit bug d’affichage dans le mode bureau sur ordianteur sans la barre latérale pour information
1 « J'aime »
Merci, je l’ai corrigé ici : FIX: Enhance category heading styles in SCSS · VaperinaDEV/fkb-pro-theme@95a3c25 · GitHub
4 « J'aime »
Testé et approuvé
1 « J'aime »
Je viens de l’installer. Je suis presque sûr qu’il y avait un panneau fakebook sur le côté droit juste après l’installation, mais il semble avoir disparu pour moi. Je ne sais pas ce que j’ai modifié pour qu’il disparaisse, ni comment le récupérer.
Bonjour 
Il y a un bouton en bas à droite pour afficher ou masquer cette section.
J’ai mis à jour le thème : DEV: Improve FKB panel and right sidebar layout handling - Pull Request #78 - VaperinaDEV/fkb-pro-theme - GitHub
2 « J'aime »
Ah, le voilà — merci ! Hmm, je dois l’avoir appuyé par accident ? Ou est-ce qu’il s’est désactivé quand j’ai ouvert cela sur mobile ? Je vais faire quelques expériences et je vous tiendrai au courant.
1 « J'aime »
Ouais, ça ne s’affiche pas sur mobile.
Oui, bien sûr.
Je pensais qu’il était possible qu’il ait été désactivé pour moi sur ordinateur lorsque je consultais notre forum sur mobile. J’ai tout de même fait ce test, et le panneau n’a pas été désactivé. Donc, c’est un mystère comment mon panneau a été désactivé sur ordinateur — je dois avoir cliqué accidentellement sur la flèche de désactivation.
1 « J'aime »
Salut Don ! J’adore vraiment le thème FKB Pro.
Petite demande : serait-il possible d’ajouter un paramètre pour afficher plusieurs avatars de participants sur les cartes de sujet, plutôt que seulement celui du dernier posteur ?
L’avatar unique a l’air très épuré, mais afficher plusieurs participants met vraiment en valeur l’activité d’une discussion. Un simple interrupteur pour cette option serait génial !
Merci pour ton excellent travail ! Leo
Salut @Don , j’ai fait une petite modification perso pour le thème FKB pro pour mettre un bouton flottant de discussion en bas à droit pour tablette et bureau et sur mobile en bas à gauche avec le même effet sur le bouton créer sujet. Je pense qu’il y a mieux en code mais cela fonctionne 
voici mon code composant: css
// 1. BOUTON FLOTTANT PRINCIPAL
.header-dropdown-toggle.chat-header-icon {
position: fixed !important;
bottom: 60px !important;
right: 20px !important;
z-index: 9999 !important;
/* Dimensions parfaites (cercle) */
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
min-height: 60px !important;
border-radius: 50% !important;
/* Couleur bleue éclatante et ombre colorée */
background: #0084ff !important;
box-shadow: 0 4px 14px rgba(0, 132, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
/* Nettoyage des marges */
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
/* Transition fluide */
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, box-shadow 0.2s ease !important;
}
/* Position spécifique sur Mobile (Écrans <= 640px) */
@media (max-width: 640px) {
.header-dropdown-toggle.chat-header-icon {
bottom: 80px !important;
left: 20px !important; /* Change à right: 20px si tu préfères le remettre à droite */
}
}
/* Effet au survol (agrandissement léger) */
.header-dropdown-toggle.chat-header-icon:hover {
transform: scale(1.08) !important;
box-shadow: 0 6px 20px rgba(0, 132, 255, 0.5), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}
/* 2. NETTOYAGE DU FOND GRIS NATIF DISCOURSE */
.header-dropdown-toggle.chat-header-icon .icon,
.header-dropdown-toggle.chat-header-icon span:not(.badge-notification):not(.chat-badge):not([class*="unread"]):not([class*="count"]) {
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* 3. CENTRAGE PARFAIT DE L'ICÔNE (La bulle) */
.header-dropdown-toggle.chat-header-icon .d-icon,
.header-dropdown-toggle.chat-header-icon svg {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
padding: 0 !important;
width: 32px !important;
height: 32px !important;
color: #ffffff !important;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1)) !important;
}
/* 4. BADGE DE NOTIFICATION (Compteur vert + Chiffre visible) */
.header-dropdown-toggle.chat-header-icon .badge-notification,
.header-dropdown-toggle.chat-header-icon .chat-badge,
.header-dropdown-toggle.chat-header-icon .unread-notifications,
.header-dropdown-toggle.chat-header-icon [class*="badge"],
.d-header-icons .header-dropdown-toggle.chat-header-icon .badge-notification {
position: absolute !important;
top: -4px !important;
right: -4px !important;
left: auto !important;
margin: 0 !important;
z-index: 10 !important;
/* Couleur verte forcée */
background-color: #53A548 !important;
background: #53A548 !important;
color: #ffffff !important;
/* Typographie forcée pour rendre le chiffre visible */
font-size: 13px !important;
font-weight: bold !important;
line-height: 18px !important;
letter-spacing: normal !important;
text-indent: 0 !important;
/* Dimensions et forme */
padding: 0 6px !important;
min-width: 22px !important;
height: 22px !important;
border-radius: 50px !important;
border: 2px solid #ffffff !important;
box-sizing: border-box !important;
/* Centrage du chiffre */
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: visible !important;
/* Animation Pulse Verte (reliée à tes keyframes) */
animation: badge-pulse 2s infinite !important;
}
/* Force tous les éléments enfants (si Discourse emballe le chiffre dans un span) à s'afficher */
.header-dropdown-toggle.chat-header-icon .badge-notification *,
.header-dropdown-toggle.chat-header-icon .chat-badge *,
.header-dropdown-toggle.chat-header-icon [class*="badge"] * {
color: #ffffff !important;
background: transparent !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: inherit !important;
}
/* 5. ANIMATIONS CORRIGÉES (Effet Radar & Rebond) */
/* 5.1 - L'onde radar (pulse) autour du badge rouge */
.header-dropdown-toggle.chat-header-icon .badge-notification,
.header-dropdown-toggle.chat-header-icon .chat-badge,
.header-dropdown-toggle.chat-header-icon .chat-channel-unread-indicator {
animation: badge-pulse 2s infinite !important;
transform-origin: center !important;
}
/* 5.2 - L'effet de rebond sur le bouton bleu entier quand il y a un message */
.header-dropdown-toggle.chat-header-icon:has(.badge-notification),
.header-dropdown-toggle.chat-header-icon:has(.chat-badge),
.header-dropdown-toggle.chat-header-icon:has(.chat-channel-unread-indicator) {
animation: chat-bounce 3s infinite !important;
}
/* --- DÉFINITION DES KEYFRAMES (Ne pas modifier) --- */
/* Définition de l'onde : on n'utilise que le box-shadow pour éviter les bugs d'affichage */
@keyframes badge-pulse {
0% {
box-shadow: 0 0 0 0 rgba(250, 62, 62, 0.8);
}
70% {
box-shadow: 0 0 0 10px rgba(250, 62, 62, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(250, 62, 62, 0);
}
}
/* Définition du rebond : le bouton saute légèrement toutes les 3 secondes */
@keyframes chat-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-6px);
}
60% {
transform: translateY(-3px);
}
}
/* 6. PULSATION DANS LA LISTE DES CANAUX ET MESSAGES PRIVÉS */
/* 6.1 - On autorise le débordement sur les conteneurs de liste */
.chat-channel-row,
.chat-channel-list-item,
.chat-drawer-container .chat-channel-unread-indicator,
.chat-channel-row .chat-channel-unread-indicator {
overflow: visible !important;
}
/* 6.2 - Style et marges du point indicateur */
.chat-channel-row .chat-channel-unread-indicator,
.chat-channel-row .badge-notification,
.chat-channel-row .unread-indicator,
.chat-drawer-container .chat-channel-unread-indicator,
.chat-full-page .chat-channel-unread-indicator,
.chat-channel-list-item .chat-channel-unread-indicator {
animation: list-dot-pulse 1.8s infinite !important;
border-radius: 50% !important;
position: relative !important;
overflow: visible !important;
margin: 0 6px !important; /* Espace pour ne pas coller au texte et à la date */
}
/* 6.3 - Animation ajustée (onde plus compacte de 6px max) */
@keyframes list-dot-pulse {
0% {
box-shadow: 0 0 0 0 rgba(0, 132, 255, 0.7); /* S'adapte à la couleur du point */
}
70% {
box-shadow: 0 0 0 6px rgba(0, 132, 255, 0); /* Rayon réduit pour rester dans la ligne */
}
100% {
box-shadow: 0 0 0 0 rgba(0, 132, 255, 0);
}
}
et le JS:
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
let lastScrollTop = 0;
let isHiddenByScroll = false;
// 1. Gestionnaire de scroll (Actif UNIQUEMENT sur mobile)
window.addEventListener("scroll", () => {
const isMobile = window.innerWidth <= 640;
const floatBtn = document.querySelector('.header-dropdown-toggle.chat-header-icon');
if (!floatBtn) return;
// Si on est sur ordinateur, on s'assure que le bouton reste toujours visible
if (!isMobile) {
if (isHiddenByScroll) {
floatBtn.style.setProperty('transform', 'translateY(0) scale(1)', 'important');
floatBtn.style.setProperty('opacity', '1', 'important');
isHiddenByScroll = false;
}
return;
}
const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Si on scroll vers le bas (et qu'on a dépassé 100px)
if (currentScrollTop > lastScrollTop && currentScrollTop > 100) {
if (!isHiddenByScroll) {
floatBtn.style.setProperty('transform', 'translateY(100px) scale(0.8)', 'important');
floatBtn.style.setProperty('opacity', '0', 'important');
isHiddenByScroll = true;
}
}
// Si on scroll vers le haut
else if (currentScrollTop < lastScrollTop) {
if (isHiddenByScroll) {
floatBtn.style.setProperty('transform', 'translateY(0) scale(1)', 'important');
floatBtn.style.setProperty('opacity', '1', 'important');
isHiddenByScroll = false;
}
}
lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
}, { passive: true });
// 2. MutationObserver pour gérer l'affichage de base
const observer = new MutationObserver(() => {
const chatOpen = document.querySelector('.chat-drawer, .d-chat-floating-panel, .chat-widget, .chat-panel, .chat-out-of-container, .chat-full-page');
const isChatRoute = window.location.pathname.startsWith('/chat');
const hasFullPageClass = document.body.classList.contains('has-full-page-chat');
const isMobile = window.innerWidth <= 640;
const isTopicRoute = window.location.pathname.includes('/t/') || document.body.classList.contains('archetype-regular');
const hideOnMobileTopic = isMobile && isTopicRoute;
const floatBtn = document.querySelector('.header-dropdown-toggle.chat-header-icon');
if (floatBtn) {
if (chatOpen || isChatRoute || hasFullPageClass || hideOnMobileTopic) {
floatBtn.style.setProperty('display', 'none', 'important');
} else {
floatBtn.style.setProperty('display', 'flex', 'important');
// Gestion propre de l'emplacement mobile / bureau
if (isMobile) {
floatBtn.style.setProperty('left', '10px', 'important'); // Change la valeur si tu veux le décaler plus
floatBtn.style.removeProperty('right');
} else {
floatBtn.style.setProperty('right', '20px', 'important');
floatBtn.style.removeProperty('left');
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true, attributes: true });
});