[UI BUG FIX] Fixes shifting menu item in teacher manual (hedyorg#4072)

**Description** Als improves the responsiveness in general of this page: ![Schermafbeelding 2023-02-28 om 21 43 23](https://user-images.githubusercontent.com/38155424/221975267-b066d23d-49b4-4364-89e3-a4e3afeafe64.png) **Fixes** This PR fixes hedyorg#4068 **How to test** Verify that the teacher manual nav bar items never shift, regardless of screen size and language.
JeremyVriens · Mar 1, 2023 · 9bcbf26 · 9bcbf26
1 parent e451134
commit 9bcbf26
Showing 1 changed file with 17 additions and 3 deletions.
diff --git a/templates/teacher-manual.html b/templates/teacher-manual.html
@@ -8,17 +8,31 @@
     </div>
     <div class="copy-container text-business-copy" id="teacher_documentation">
         <div class="flex gap-8">
-            <div class="flex-0 w-1/4 text-links-plain rounded-md bg-gray-200 p-4">
+            <div class="flex-0 text-links-plain rounded-md bg-gray-200 p-4">
                 {# Section nav #}
                 {% for key, title in section_titles %}
                 {% if key == section_key %}
-                    <div class="font-bold my-2"><a href="/for-teachers/manual/{{key}}"><i class="fa-solid fa-chevron-down w-4"></i> {{ title }}</a></div>
+                    <div class="font-bold my-2">
+                        <a href="/for-teachers/manual/{{key}}">
+                            <div class="flex flex-row items-center gap-2">
+                                <i class="fa-solid fa-chevron-down w-4"></i>
+                                <span>{{ title }}</span>
+                            </div>
+                        </a>
+                    </div>
                     {# Subsection nav #}
                     {% for title in subsection_titles %}
                         <div class="ltr:ml-8 rtl:mr-8 text-sm"><a href="#{{title|slugify}}">· {{ title }}</a></div>
                     {% endfor %}
                 {% else %}
-                    <div class="my-2"><a href="/for-teachers/manual/{{key}}"><i class="fa-solid fa-chevron-right w-4"></i> {{ title }}</a></div>
+                    <div class="my-2">
+                        <a href="/for-teachers/manual/{{key}}">
+                            <div class="flex flex-row items-center gap-2">
+                                <i class="fa-solid fa-chevron-right w-4"></i>
+                                <span>{{ title }}</span>
+                            </div>
+                        </a>
+                    </div>
                 {% endif %}
                 {% endfor %}
             </div>