Thème Horizon

[serkhelesheyi]

Débordement du conteneur d’annonce mobile dans les annonces internes – Inadéquation de la mise en page RTL/LTR

Bonjour

J’utilise le thème Horizon avec le plugin House Ads officiel, et j’ai créé un composant personnalisé pour styliser les annonces en utilisant des variables CSS et des règles de mise en page compatibles avec le système de conception de Discourse.

Problème : Le conteneur d’annonce déborde de la vue sur mobile (LTR et RTL)

• Thème : Horizon (non reproductible dans les thèmes par défaut ou autres comme Material, etc.)
• Plugin : House Ads + composant personnalisé
• Appareil : Mobile
• Comportement :
  • Lorsque la langue du site = Anglais (LTR) → le bord gauche de .ad-container est coupé (déborde à gauche).
  • Lorsque la langue du site = Persan/Arabe (RTL) → le bord droit est coupé (déborde à droite).
• Attendu : La carte d’annonce doit être entièrement contenue dans la vue, centrée ou alignée avec la largeur du contenu de la publication.

Mon code CSS :

Résumé

:root {
  /* Couleurs de base */
  --ad-bg: var(--secondary);
  --ad-border: var(--highlight);
  --ad-text: var(--primary);

  /* Étiquette */
  --ad-label-bg: var(--highlight);
  --ad-label-text: var(--danger);
}


.house-creative {
  margin-left: 0 !important;
}


.house-creative a.between-posts-ad {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: transparent;
  font-family: inherit;
}

/* ===============================
   Conteneur de carte
   =============================== */

.house-creative .ad-container {
    direction: rtl !important;
    text-align: center !important;
margin-bottom: 20px;
      padding: 10px 5px;
     max-width: calc(#{$topic-avatar-width} + #{$topic-body-width} + (#{$topic-body-width-padding} * 2));  background-color: var(--ad-bg);
  border: 2px solid var(--ad-border);
  border-radius: 10px;

  box-sizing: border-box;
  line-height: 1.7;

  color: var(--ad-text);

  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
}

.house-creative a.between-posts-ad:hover .ad-container {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


.house-creative .ad-label {
    display: inline-block;       
    text-align: center;   
    margin-bottom: 6px;
     padding: 4px 12px;

  font-size: 0.85em;
  font-weight: 700;
  text-transform: uppercase;

  background-color: var(--ad-label-bg);
  color: var(--ad-label-text);

  border-radius: 999px;
}

.house-creative .ad-container .ad-text {
  margin: 0;

  font-size: 1rem;
  line-height: 1.9;
  color: var(--ad-text);

  direction: rtl ;
  text-align: center !important ;
  unicode-bidi: isolate;
}


@media (max-width: 480px) {
  .house-creative .ad-container {
direction: rtl !important;
text-align: center !important; 
padding: 16px 12px; 
width: 100%;
max-width: 100%;

  }
}