From 8d9dcc19f0eff8ed97c6397e37a92bc3b48afb62 Mon Sep 17 00:00:00 2001
From: Mehdi El Oualy <mehdieloualy@gmail.com>
Date: Thu, 5 Sep 2024 11:12:55 +0100
Subject: [PATCH] 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
---
 .../static/styles/screenshots/screenshot_detail.css    |  4 ++--
 weblate/templates/screenshots/screenshot_detail.html   | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/weblate/static/styles/screenshots/screenshot_detail.css b/weblate/static/styles/screenshots/screenshot_detail.css
index 974d0f3752bc..52505be8037e 100644
--- a/weblate/static/styles/screenshots/screenshot_detail.css
+++ b/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;
   }
 
diff --git a/weblate/templates/screenshots/screenshot_detail.html b/weblate/templates/screenshots/screenshot_detail.html
index b12f8cdee407..b294906c6540 100644
--- a/weblate/templates/screenshots/screenshot_detail.html
+++ b/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>