fix: AA-1114: Set a max width on Text Input answers

We saw a bug where on mobile devices or smaller web browser windows
the input text field could stretch beyond the visible screen. By
setting the max width, we will always contain it to the size of its
parent element.

common/lib/capa/capa/templates/textline.html

@@ -23,10 +23,7 @@
 % for description_id, description_text in response_data['descriptions'].items():
     <p class="question-description" id="${description_id}">${description_text}</p>
 % endfor
-<input type="text" name="input_${id}" id="input_${id}" ${describedby_html} value="${value}"
-    % if do_math:
-        class="math"
-    % endif
+<input type="text" class="mw-100 ${'math' if do_math else ''}" name="input_${id}" id="input_${id}" ${describedby_html} value="${value}"
     % if size:
         size="${size}"
     % endif

common/lib/capa/capa/tests/test_input_templates.py

@@ -542,7 +542,7 @@ class TextlineTemplateTest(TemplateTestCase):
         self.context['do_math'] = True
         xml = self.render_to_xml(self.context)
 
-        xpath = "//input[@class='math']"
+        xpath = "//input[@class='mw-100 math']"
         self.assert_has_xpath(xml, xpath, self.context)
 
         xpath = "//div[@class='equation']"