Update refApp.py

refApp.py

@@ -14,45 +14,36 @@ st.markdown("""
     <style>
         /* Cible le bouton spécifique que vous avez identifié */
         button[data-testid="stBaseButton-headerNoPadding"]::after {
-            content: " Menu";      /* Le texte à ajouter */
-            margin-left: 8px;     /* Espace entre la flèche et le texte (ajustez si besoin) */
-            font-size: 0.9em;     /* Taille du texte (ajustez si besoin) */
-            vertical-align: middle; /* Aide à l'alignement vertical avec l'icône */
-            color: inherit;       /* Hérite de la couleur du thème (bon pour thèmes clair/sombre) */
-            font-weight: normal;  /* Assure que le texte n'est pas en gras par défaut */
-            display: inline-flex; /* Peut aider à un meilleur alignement et comportement */
+            content: " Menu";
+            margin-left: 8px;
+            font-size: 0.9em;
+            vertical-align: middle;
+            color: inherit;
+            font-weight: normal;
+            display: inline-flex;
             align-items: center;
         }
         div[data-testid="stCodeBlock"] pre,
-        pre.st-emotion-cache-1nqbjoj /* Cible spécifique à votre HTML, attention à sa stabilité */
-        {
-
+        pre.st-emotion-cache-1nqbjoj {
             max-height: 520px !important;
             overflow-y: auto !important;
             font-size: 0.875em !important;
-            /* Assurez-vous qu'il n'est pas caché par autre chose */
-            display: block !important; 
+            display: block !important;
             visibility: visible !important;
             opacity: 1 !important;
         }
-
-        /* Cible le div conteneur direct à l'intérieur de stCodeBlock s'il existe et gère le scroll */
         div[data-testid="stCodeBlock"] > div:first-child {
-            /* height: 120px !important; - SUPPRIMÉ : causait des problèmes de layout */
-            max-height: 520px !important; /* Correspond à la valeur du pre ci-dessus */
+            max-height: 520px !important;
             overflow-y: auto !important;
-             display: block !important;
+            display: block !important;
             visibility: visible !important;
             opacity: 1 !important;
         }
-        
-        /* Si le div interne au <pre> doit gérer le scroll */
         pre.st-emotion-cache-1nqbjoj > div[style*="background-color: transparent;"] {
-            height: auto !important; 
-            max-height: 100% !important; 
+            height: auto !important;
+            max-height: 100% !important;
             overflow-y: auto !important;
         }
-                /* === NOUVELLES RÈGLES POUR L'ICÔNE DE COPIE DE ST.CODE === */
         button[data-testid="stCodeCopyButton"] {
             opacity: 0.85 !important;
             visibility: visible !important;
@@ -61,240 +52,48 @@ st.markdown("""
             border-radius: 4px !important;
             padding: 3px 5px !important;
             transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
-            /* top: 2px !important; */
-            /* right: 2px !important; */
         }
-
         button[data-testid="stCodeCopyButton"]:hover {
             opacity: 1 !important;
             background-color: #e6e8eb !important;
             border-color: #b0b0b0 !important;
         }
-
         button[data-testid="stCodeCopyButton"] svg {
-            transform: scale(1.2); 
+            transform: scale(1.2);
             vertical-align: middle;
         }
-        
-        /* === SOLUTION POUR COMPRESSION LATERALE DE LA SIDEBAR === */
-        /* Force le contenu principal à se comprimer au lieu d'être décalé */
         section[data-testid="stSidebar"] {
             width: 31.5rem !important;
             min-width: 31.5rem !important;
             max-width: 31.5rem !important;
         }
-        
-        /* RÉDUIRE LA SIDEBAR QUAND FERMÉE */
         section[data-testid="stSidebar"][aria-expanded="false"] {
             width: 0rem !important;
             min-width: 0rem !important;
             max-width: 0rem !important;
             overflow: hidden !important;
         }
-        
-        /* Ajustement du conteneur principal pour la compression */
-        .main .block-container {
-            max-width: calc(100vw - 31.5rem) !important;
-            width: calc(100vw - 31.5rem) !important;
-        }
-        
-        /* Quand la sidebar est fermée, reprendre toute la largeur */
-        section[data-testid="stSidebar"][aria-expanded="false"] ~ .main .block-container,
-        section[data-testid="stSidebar"]:not([aria-expanded="true"]) ~ .main .block-container {
-            max-width: 100vw !important;
-            width: 100vw !important;
-        }
-        
-        /* Alternative pour cibler via l'état collapsed */
-        .main .block-container {
-            transition: width 0.3s ease, max-width 0.3s ease !important;
-        }
-        
-        /* PADDING SPECIFIQUE POUR INTERPRO1_LIGHT */
         [data-testid="stMainBlockContainer"] {
             padding-top: 3rem !important;
         }
-        
         .css-1d391kg, .css-18e3th9 {
             padding-top: 3rem !important;
         }
-        
-        /* REDUCTION SPECIFIQUE POUR LA PAGE D'ACCUEIL UNIQUEMENT */
         h1[data-testid="stHeading"]:first-of-type {
             margin-top: -2rem !important;
             padding-top: 0rem !important;
         }
-        
         h1:contains("Bienvenue dans votre laboratoire") {
             margin-top: -2rem !important;
             padding-top: 0rem !important;
         }
-        
-        /* Responsive: sur petits écrans, garder le comportement normal */
         @media (max-width: 768px) {
             .main .block-container {
                 max-width: 100vw !important;
                 width: 100vw !important;
             }
         }
-        
-        /* === RÈGLES SPÉCIFIQUES POUR st.code() QUI CAUSE LE PROBLÈME === */
-        /* Forcer la compression sur TOUS les blocs de code */
-        [data-testid="stCodeBlock"],
-        div[data-testid="stCodeBlock"],
-        .stCodeBlock {
-            max-width: 100vw !important;
-            width: 100vw !important;
-            box-sizing: border-box !important;
-        }
-        
-        /* Quand sidebar ouverte, compresser les blocs de code */
-        section[data-testid="stSidebar"][aria-expanded="true"] ~ .main [data-testid="stCodeBlock"],
-        section[data-testid="stSidebar"][aria-expanded="true"] ~ .main div[data-testid="stCodeBlock"],
-        section[data-testid="stSidebar"][aria-expanded="true"] ~ .main .stCodeBlock {
-            max-width: calc(100vw - 31.5rem) !important;
-            width: calc(100vw - 31.5rem) !important;
-        }
-        
-        /* Forcer sur les éléments internes du code block */
-        [data-testid="stCodeBlock"] > div,
-        [data-testid="stCodeBlock"] pre,
-        [data-testid="stCodeBlock"] code {
-            max-width: 100% !important;
-            width: 100% !important;
-            box-sizing: border-box !important;
-            overflow-x: auto !important;
-        }
-        
-        /* Quand sidebar ouverte, aussi sur les éléments internes */
-        section[data-testid="stSidebar"][aria-expanded="true"] ~ .main [data-testid="stCodeBlock"] > div,
-        section[data-testid="stSidebar"][aria-expanded="true"] ~ .main [data-testid="stCodeBlock"] pre,
-        section[data-testid="stSidebar"][aria-expanded="true"] ~ .main [data-testid="stCodeBlock"] code {
-            max-width: calc(100vw - 31.5rem) !important;
-            width: calc(100vw - 31.5rem) !important;
-        }
-        
     </style>
-    <script>
-        // Force la détection de l'état de la sidebar
-        function checkSidebarState() {
-            const sidebar = document.querySelector('section[data-testid="stSidebar"]');
-            const mainContent = document.querySelector('.main .block-container');
-            
-            if (sidebar && mainContent) {
-                const isExpanded = sidebar.getAttribute('aria-expanded') === 'true';
-                
-                if (isExpanded) {
-                    mainContent.style.maxWidth = 'calc(100vw - 31.5rem)';
-                    mainContent.style.width = 'calc(100vw - 31.5rem)';
-                } else {
-                    mainContent.style.maxWidth = '100vw';
-                    mainContent.style.width = '100vw';
-                }
-            }
-            
-            // FORCE SPÉCIAL POUR st.code() - Le vrai problème
-            const codeBlocks = document.querySelectorAll('[data-testid="stCodeBlock"], div[data-testid="stCodeBlock"], .stCodeBlock');
-            codeBlocks.forEach(block => {
-                if (sidebar && sidebar.getAttribute('aria-expanded') === 'true') {
-                    // Sidebar ouverte - compresser
-                    block.style.maxWidth = 'calc(100vw - 31.5rem)';
-                    block.style.width = 'calc(100vw - 31.5rem)';
-                    block.style.boxSizing = 'border-box';
-                    
-                    // Forcer aussi sur les éléments internes
-                    const innerElements = block.querySelectorAll('div, pre, code');
-                    innerElements.forEach(inner => {
-                        inner.style.maxWidth = '100%';
-                        inner.style.width = '100%';
-                        inner.style.overflowX = 'auto';
-                    });
-                } else {
-                    // Sidebar fermée - pleine largeur
-                    block.style.maxWidth = '100vw';
-                    block.style.width = '100vw';
-                    
-                    const innerElements = block.querySelectorAll('div, pre, code');
-                    innerElements.forEach(inner => {
-                        inner.style.maxWidth = '100%';
-                        inner.style.width = '100%';
-                    });
-                }
-            });
-        }
-        
-        // Observer les changements
-        const observer = new MutationObserver(checkSidebarState);
-        
-        // Démarrer l'observation quand le DOM est prêt
-        document.addEventListener('DOMContentLoaded', function() {
-            const sidebar = document.querySelector('section[data-testid="stSidebar"]');
-            if (sidebar) {
-                observer.observe(sidebar, { attributes: true, attributeFilter: ['aria-expanded'] });
-            }
-            checkSidebarState(); // Check initial state
-        });
-        
-        // Observer pour changements DOM (génération de contenu)
-        const contentObserver = new MutationObserver(function(mutations) {
-            mutations.forEach(function(mutation) {
-                if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
-                    // Du nouveau contenu a été ajouté, re-vérifier l'état
-                    setTimeout(checkSidebarState, 100);
-                }
-            });
-        });
-        
-        // Observer le conteneur principal pour changements
-        document.addEventListener('DOMContentLoaded', function() {
-            const main = document.querySelector('.main');
-            if (main) {
-                contentObserver.observe(main, { childList: true, subtree: true });
-            }
-        });
-        
-        // Fallback: check périodique
-        setInterval(checkSidebarState, 500);
-        
-        // Disable Enter key form submission
-        function disableEnterSubmit() {
-            const forms = document.querySelectorAll('form[data-testid="stForm"]');
-            forms.forEach(form => {
-                const inputs = form.querySelectorAll('input[type="text"], textarea');
-                inputs.forEach(input => {
-                    input.addEventListener('keydown', function(event) {
-                        if (event.key === 'Enter' && !event.shiftKey) {
-                            event.preventDefault();
-                            return false;
-                        }
-                    });
-                });
-            });
-        }
-        
-        // Apply on DOM ready and on content changes
-        document.addEventListener('DOMContentLoaded', disableEnterSubmit);
-        
-        // Observer for new forms being added dynamically
-        const formObserver = new MutationObserver(function(mutations) {
-            mutations.forEach(function(mutation) {
-                if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
-                    setTimeout(disableEnterSubmit, 100);
-                }
-            });
-        });
-        
-        // Start observing
-        document.addEventListener('DOMContentLoaded', function() {
-            const body = document.querySelector('body');
-            if (body) {
-                formObserver.observe(body, { childList: true, subtree: true });
-            }
-        });
-        
-        // Apply periodically as fallback
-        setInterval(disableEnterSubmit, 1000);
-    </script>
 """, unsafe_allow_html=True)
 
 # --- Initial Data Structure & Constants ---