Прича о дебаговању: овладати каприсама Firefox-а са Bootstrap 5

@startuml
left to right direction
actor "Front-end programer" as Dev

rectangle "Maket UI Bootstrap 5" {
  usecase "Ispraviti poravnanje Flexbox" as UC1
  usecase "Prilagoditi padding dinamički (JS)" as UC2
  usecase "Kontrolisi tipografiju (clamp())" as UC3
  usecase "Resiti pretek menija" as UC4
  usecase "Направити иконицу менија видљиву" as UC5
}

actor "Firefox pregledač" as Firefox

Dev -- (UC1)
Dev -- (UC2)
Dev -- (UC3)
Dev -- (UC4)
Dev -- (UC5)

(UC1) ..> Firefox : <<extend>>
(UC2) ..> Firefox : <<extend>>
(UC3) ..> Firefox : <<extend>>
(UC4) ..> Firefox : <<extend>>
(UC5) ..> Firefox : <<extend>>

note right of Firefox : Révèle les problèmes de compatibilité
@enduml

@startuml
!theme plain

package "Решение фронт-енд" {
  component "HTML (Шаблони FTL)" as HTML
  component "script.js" as JS
  component "styles.css" as CSS

  interface "Манипулација ДОМ" as iDOM
  interface "Корекције CSS" as iCSS
}

package "okvir" {
  component "Bootstrap 5.2" as BS
  interface "CSS promenljive" as iVars
  interface "Utilitarne klase" as iUtils
}

HTML ..> iDOM : nécessite
JS ..> iDOM : réalise

HTML ..> iCSS : nécessite
CSS ..> iCSS : réalise

CSS ..> iVars : nécessite
BS ..> iVars : fournit

HTML ..> iUtils : utilise
BS ..> iUtils : fournit

note right of JS
  - Mesure la hauteur de la navbar
  - Applique le padding dynamiquement
end note

note right of CSS
  - Utilise clamp() pour la typographie
  - Réduit les marges du menu
  - Surcharge l'icône du menu via les variables
end note

@enduml

<section id="home" class="hero-section">
    <div class="container">
        <!-- Cette ligne est la clé du problème -->
        <div class="row align-items-center min-vh-100">
            <div class="col-lg-6">
                <!-- Contenu de gauche -->
            </div>
            <div class="col-lg-6">
                <!-- Carte de droite -->
            </div>
        </div>
    </div>
</section>

<section id="home" class="hero-section">
    <div class="container h-100">
        <div class="row align-items-center min-vh-100 h-100">
            <!-- ... -->
        </div>
    </div>
</section>

document.addEventListener('DOMContentLoaded', function() {
    function adjustHeroPadding() {
        const navbar = document.querySelector('.navbar.fixed-top');
        const heroSection = document.querySelector('.hero-section');

        if (navbar && heroSection) {
            const navbarHeight = navbar.offsetHeight;
            heroSection.style.paddingTop = navbarHeight + 'px';
        }
    }

    // Ajuster au chargement et au redimensionnement
    adjustHeroPadding();
    window.addEventListener('resize', adjustHeroPadding);
});

@startuml
title Решење за проблем каннибалне траке за навигацију
actor Utilisateur
participant "Прегледач" as Browser
participant "script.js" as JS
participant "dom" as DOM

Utilisateur -> Browser: Charge la page
activate Browser

Browser -> JS: Déclenche l'événement 'DOMContentLoaded'
activate JS

JS -> DOM: querySelector('.navbar.fixed-top')
activate DOM
DOM --> JS: Retourne l'élément Navbar
deactivate DOM

JS -> DOM: querySelector('.hero-section')
activate DOM
DOM --> JS: Retourne l'élément Hero
deactivate DOM

JS -> DOM: navbar.offsetHeight
activate DOM
DOM --> JS: Retourne la hauteur calculée (ex: 83px)
deactivate DOM

JS -> DOM: heroSection.style.paddingTop = "83px"
activate DOM
deactivate DOM

deactivate JS
deactivate Browser

... Plus tard ...

Utilisateur -> Browser: Redimensionne la fenêtre
activate Browser
Browser -> JS: Déclenche l'événement 'resize'
activate JS
JS -> JS: Exécute à nouveau adjustHeroPadding()
note right of JS: Le processus de mesure et\nd'application du padding se répète.
deactivate JS
deactivate Browser

@enduml

.hero-content h1 {
    color: var(--text-primary);
    line-height: 1.2;
    /*
       Min: 2rem
       Préférée: s'adapte à la vue
       Max: 2.5rem (40px)
    */
    font-size: clamp(2rem, 1.2rem + 1.5vw, 2.5rem);
}

/* La version finale, légèrement plus compacte */
.navbar-nav .nav-link {
    font-size: 0.9rem; /* 90% de la taille de base */
    color: var(--text-primary) !important;
    font-weight: 500;
    margin: 0 0.2rem;
    padding: 0.5rem 0.5rem !important;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

/* ======================
   Fix pour l'icône du menu Burger (Blanc)
   ====================== */
[data-bs-theme="dark"] .navbar-toggler-icon,
[data-bs-theme="high-contrast"] .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@startmindmap
+ Débogage Cross-Browser : Bootstrap 5
++ **Conflit :** Chrome (Blink) vs Firefox (Gecko)
++ **Problème 1 : Alignement Hero**
+++ Cause : Hauteur implicite
+++ Solution : Classe `.h-100`
++ **Problème 2 : Navbar Cannibale**
+++ Cause : "Магични број" (padding fixe)
+++ Solution : JS `offsetHeight`
++ **Problème 3 : Typographie Géante**
+++ Cause : Rendu des `rem`
+++ Solution : CSS `clamp()`
++ **Problème 4 : Menu qui déborde**
+++ Cause : Calcul de largeur sub-pixel
+++ Solution : Réduction des marges/paddings
++ **Problème 5 : Icône Invisible**
+++ Cause : SVG non adaptable au thème
+++ Solution : Surcharge de variable CSS
++ **Leçons Clés**
+++ Firefox force un code robuste
+++ Fuir les "magični brojevi"
+++ Maîtriser la typographie fluide
+++ Personnaliser via les variables CSS
@endmindmap