Limit height of strings table in screenshot detail page

To prevent scroll and hiding the second table, a height limit has been added to the first table showing strings related to the screenshot.

Fixes: WeblateOrg#7085

weblate/static/styles/screenshots/screenshot_detail.css

@@ -4,13 +4,13 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-#sources-listing {
+#sources-listing #strings-table-container {
   max-height: 400px;
   overflow-y: auto;
 }
 
 @media (max-width: 767px) {
-  #sources-listing {
+  #sources-listing #strings-table-container {
     max-height: 300px;
   }
 

weblate/templates/screenshots/screenshot_detail.html

@@ -30,8 +30,12 @@
 
 
 <div class="panel panel-default" id="sources-listing" data-href="{% url 'screenshot-js-get' pk=object.pk %}">
-  <div class="panel-heading"><h4 class="panel-title">{% trans "Assigned source strings" %}</h4></div>
-  {% include "screenshots/screenshot_sources_body.html" with sources=objects.units.order %}
+  <div class="panel-heading">
+    <h4 class="panel-title">{% trans "Assigned source strings" %}</h4>
+  </div>
+  <div id="strings-table-container">
+    {% include "screenshots/screenshot_sources_body.html" with sources=objects.units.order %}
+  </div>
   <div class="panel-footer">
     {% trans "Screenshot is shown to add visual context for all listed source strings." %}
   </div>
@@ -56,7 +60,7 @@
     </div>
     <form class="form-inline double-submission">
       {% csrf_token %}
-      <input type="text" required="yes" name="q" id="search-input" placeholder="{% trans "Source string search" %}" />
+      <input class="textinput form-control" type="text" required="yes" name="q" id="search-input" placeholder="{% trans "Source string search" %}" />
       <button data-href="{% url 'screenshot-js-search' pk=object.pk %}" class="btn btn-primary" id="screenshots-search">{% trans "Search" %}</button>
     </form>
   </div>