From 027a08ea3dbdd9721f4c83b939d818e97f4a2381 Mon Sep 17 00:00:00 2001
From: Dillon Dumesnil <ddumesnil@edx.org>
Date: Wed, 5 Jan 2022 09:31:09 -0800
Subject: [PATCH] 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       | 5 +----
 common/lib/capa/capa/tests/test_input_templates.py | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/common/lib/capa/capa/templates/textline.html b/common/lib/capa/capa/templates/textline.html
index 58bba7d093..f927d732f7 100644
--- a/common/lib/capa/capa/templates/textline.html
+++ b/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
diff --git a/common/lib/capa/capa/tests/test_input_templates.py b/common/lib/capa/capa/tests/test_input_templates.py
index 3425c623d0..d18f7fc491 100644
--- a/common/lib/capa/capa/tests/test_input_templates.py
+++ b/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']"