From d4691ce0ab8a99f98ce87d99462eceadef538a91 Mon Sep 17 00:00:00 2001
From: Daniele Rapetti <5535617+Iximiel@users.noreply.github.com>
Date: Mon, 9 Jun 2025 16:30:01 +0200
Subject: [PATCH] adding an  extra container to localize the horizontal scroll
 to the input file

---
 src/PlumedToHTML/PlumedToHTML.py    | 6 ++++--
 src/PlumedToHTML/assets/header.html | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/PlumedToHTML/PlumedToHTML.py b/src/PlumedToHTML/PlumedToHTML.py
index 156bc58..f6fcfdc 100644
--- a/src/PlumedToHTML/PlumedToHTML.py
+++ b/src/PlumedToHTML/PlumedToHTML.py
@@ -358,7 +358,8 @@ def get_html( inpt, name, outloc, tested, broken, plumedexe, usejson=None, maxch
     plumed_formatter = load_formatter_from_file(formatfile, "PlumedFormatter", keyword_dict=keyword_dict, input_name=name, hasload=found_load, broken=any(broken), auxinputs=inputfiles, auxinputlines=inputfilelines, valuedict=valuedict, actions=actions, checkaction=checkaction )
 
     # Now generate html of input
-    html = '<div class="plumedpreheader">\n'
+    html = '<div class="plumedInputContainer">\n'
+    html += '<div class="plumedpreheader">\n'
     html += f'<div class="headerInfo" id="value_details_{name}"> Click on the labels of the actions for more information on what each action computes </div>\n'
     html += '<div class="containerBadge">\n'
     for i in range(len(tested)) :
@@ -404,7 +405,8 @@ def get_html( inpt, name, outloc, tested, broken, plumedexe, usejson=None, maxch
     else : 
        # html += highlight( final_inpt, plumed_lexer, HtmlFormatter() )
        html += highlight( final_inpt, plumed_lexer, plumed_formatter )
-
+    #close the html = '<div class="plumedInputContainer">\n'
+    html += '</div>\n'
     # Now remove keywords that appear in examples
     mykeywords = plumed_formatter.getCheckActionKeywords()
     for key in mykeywords : 
diff --git a/src/PlumedToHTML/assets/header.html b/src/PlumedToHTML/assets/header.html
index b66c2f8..7c5c6b1 100644
--- a/src/PlumedToHTML/assets/header.html
+++ b/src/PlumedToHTML/assets/header.html
@@ -1,4 +1,8 @@
 <style>
+.plumedInputContainer{
+  width: 100%;
+  overflow: auto;
+}
 .plumedpreheader{
     width: 100%;
     display: grid;