fix(ui): Avoid scroll in Add Strings to screenshot (#12418)

* Avoid scroll in add strings to screenshot

- Added a height limit to the first table showing strings related to the screenshot. to prevent scroll and hiding the second table.
- Fixed buttons overallaping in the actions of the tables on mobile devices

Fixes: #7085

* 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: #7085

* Remove margin-bottom from screenshot strigns table

* Update screenshot_detail.css

Remove unnecessary margin-bottom from table

weblate/static/styles/screenshots/screenshot_detail.css

@@ -0,0 +1,31 @@
+/*
+ * Copyright © Michal Čihař <[email protected]>
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+#sources-listing #strings-table-container {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+#sources-listing table,
+#search-results table {
+  margin-bottom: 0;
+}
+
+@media (max-width: 767px) {
+  #sources-listing #strings-table-container {
+    max-height: 300px;
+  }
+
+  #sources-listing td > .btn {
+    margin-bottom: 5px;
+  }
+
+  .panel-footer {
+    gap: 20px;
+    display: flex;
+    flex-direction: column;
+  }
+}

weblate/templates/base.html

@@ -101,8 +101,11 @@
   <meta property="og:title" content="{% if title %}{{ title }}{% elif object %}{{ object }}{% elif page_user %}{{ page_user }}{% else %}{{ site_title }}{% endif %}" />
   <meta property="og:description" content="{{ description }}" />
 
-{% block extra_meta %}
-{% endblock %}
+  {% block extra_meta %}
+  {% endblock %}
+
+  {% block extra_styles %}
+  {% endblock %}
 
  </head>
 

weblate/templates/screenshots/screenshot_detail.html

@@ -13,6 +13,10 @@
 {% endcompress %}
 {% endblock %}
 
+{% block extra_styles %}
+  <link rel="stylesheet" href="{% static 'styles/screenshots/screenshot_detail.css' %}{{ cache_param }}" />
+{% endblock %}
+
 {% block breadcrumbs %}
 {% path_object_breadcrumbs object.translation.component %}
 <li><a href="{% url 'screenshots' path=object.translation.component.get_url_path %}">{% trans "Screenshots" %}</a></li>
@@ -26,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>
@@ -52,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>