Better help and help text div now has styling

Author: MaxITService

popup-page-style.css

@@ -96,6 +96,11 @@ body:has(#copyProfileContainer:not([style*="display: none"])) #versionContainer
     transition: box-shadow var(--transition-duration-release) ease, background-color var(--transition-duration-release) ease;
 }
 
+.text-inside-container
+{
+    margin: 0 2rem;
+}
+
 h2 {
     margin: 0 0 16px 0;
     font-size: 16px;

popup.html

@@ -19,11 +19,13 @@ <h2>Profile</h2>
                 <button id="addProfile">Add Profile</button>
                 <button id="copyProfile">Duplicate Current Profile To A New One</button>
                 <button id="deleteProfile" class="danger">Delete</button>
-                <div id="versionContainer"><p id="version"> Version 0.0.0.7</p>
-                <p id="topExplanationText"> Your changes will be saved instantly. Reload website to apply. Pressing "Shift" while pressing a key changes it's autosend behaviour!
-                    <a href="#helpSection">Go to Help Section</a>
+                <div id="versionContainer">
+                    <p id="version"> Version 0.0.0.7</p>
+                    <p id="topExplanationText"> Your changes will be saved instantly. Reload website to apply. Pressing
+                        "Shift" while pressing a key changes it's autosend behaviour!
+                        <a href="#helpSection">Go to Help Section</a>
 
-                </p>
+                    </p>
                 </div>
             </div>
             <!-- Add Profile Input and Save/Cancel Buttons -->
@@ -93,7 +95,8 @@ <h2>Backup & Restore</h2>
             </div>
             <!-- Confirmation Div -->
             <div id="confirmationDiv" class="confirmation" style="display: none;">
-                <p>File loaded successfully. But profile with the same name exists in a system. Do you want to overwrite currently existing profile?</p>
+                <p>File loaded successfully. But profile with the same name exists in a system. Do you want to overwrite
+                    currently existing profile?</p>
                 <button id="confirmOverwrite">Yes</button>
                 <button id="cancelOverwrite">No</button>
             </div>
@@ -106,26 +109,38 @@ <h2>Backup & Restore</h2>
         <!-- Help Section -->
         <section class="section" id="helpSection">
             <h2>Help</h2>
-            <p>Here is some information about the ChatGPT Quick Buttons</p>
-            <p>ABSOLUTELY DO BACKUP YOUR PROFILE! IN CASE OF UPDATE, YOU MAY LOSE YOUR BUTTONS - ANYTIME. BE SURE TO BACKUP YOUR PROFILE! I am not yet skillful enough in JS to make sure all updates will go without problems</p>
-            <ul>
-                <li>In case something stopped working: The websites often change their structure. My extension therefore addresses elements that are not longer present. Therefore, when I notice this, I need to make an update, and then it takes time for Google to approve it.</li>
-                <li>In case something is not working: try to use English version of the websites. LLMs do not care about language, so you can use any language you want in chat, while keeping interface language English. I only test on English languages of webpages, because I have to work and have no spare time.</li>
-                <li><a href="https://github.com/MaxITService/ChatGPT-Quick-Buttons-for-your-text">Github: you can provide code you want to see in app here.</a></li>
-                <li><a href="https://buymeacoffee.com/netstaff">Donation link. If you are very rich, please send me huge amount of money, thank you!</a></li>
-            </ul>
+            <div class="text-inside-container">
+                <p>Some information:</p>
+                <p>ABSOLUTELY DO BACKUP YOUR PROFILE! IN CASE OF UPDATE, YOU MAY LOSE YOUR BUTTONS - ANYTIME. BE SURE TO
+                    BACKUP YOUR PROFILE! I am not yet skillful enough in JS to make sure all updates will go without
+                    problems</p>
+                <ul>
+                    <li>In case of a problem: first step is to reload your browser.</li>
+                    <li>In case something stopped working completely: The websites often change their structure. My extension
+                        therefore addresses elements that are not longer present. Therefore, when I notice this, I need
+                        to make an update, and then it takes time for Google to approve it.</li>
+                    <li>In case something is not working: try to use English version of the websites. LLMs do not care
+                        about language, so you can use any language you want in chat, while keeping interface language
+                        English. I only test on English languages of webpages, because I have to work and have no spare
+                        time.</li>
+                    <li><a href="https://github.com/MaxITService/ChatGPT-Quick-Buttons-for-your-text">Github: you can
+                            provide code you want to see in app here.</a></li>
+                    <li><a href="https://buymeacoffee.com/netstaff">Donation link. If you are very rich, please send me
+                            huge amount of money, thank you!</a></li>
+                </ul>
+            </div>
         </section>
-    </div>   
+    </div>
 
     <!-- Toast Notification Container -->
     <div id="toastContainer" class="toast-container"></div>
-    <script src="log.js"></script>    
+    <script src="log.js"></script>
     <script src="/popup-page-scripts/popup-page-visuals.js"></script>
-    <script src="/popup-page-scripts/popup-page-profiles.js"></script>    
+    <script src="/popup-page-scripts/popup-page-profiles.js"></script>
     <script src="/popup-page-scripts/popup-page-backup-handler.js"></script>
     <script src="/popup-page-scripts/popup-page-customButtons.js"></script>
     <script src="/popup-page-scripts/popup-page-script.js"></script>
 
 </body>
 
-</html>
+</html>