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

weblate/static/styles/screenshots/screenshot_detail.css

@@ -0,0 +1,26 @@
+/*
+ * Copyright © Michal Čihař <[email protected]>
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+#sources-listing {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+@media (max-width: 767px) {
+  #sources-listing {
+    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>