fix(ui): fix changes page text wrapping and paginator styling (#17368)

* fix(ui): fix changes page text wrapping and paginator styling

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: KarenKonou

weblate/static/styles/main.css

@@ -658,6 +658,7 @@ form + .login-label {
   background-color: #e5f0f2;
   padding: 8px 10px;
   overflow-wrap: anywhere;
+  white-space: normal;
 }
 .comment-content blockquote {
   border-left: 5px solid #ddd;

weblate/templates/paginator.html

@@ -2,34 +2,36 @@
 
 {% if page_obj.paginator.num_pages > 1 %}
   <ul class="pagination">
-    <li {% if page_obj.number == 1 %}class="disabled"{% endif %}>
+    <li class="page-item{% if page_obj.number == 1 %} disabled{% endif %}">
       <a href="?page=1&amp;limit={{ page_obj.paginator.per_page }}{% if page_obj.paginator.sort_by %}&amp;sort_by={{ page_obj.paginator.sort_by }}{% endif %}{% if query_string %}&amp;{{ query_string }}{% endif %}{% if anchor %}#{{ anchor }}{% endif %}"
-         class="green">
+         class="page-link green">
         {% if LANGUAGE_BIDI %}
           {% icon "page-last.svg" %}
         {% else %}
           {% icon "page-first.svg" %}
         {% endif %}
       </a>
     </li>
-    <li {% if not page_obj.has_previous %}class="disabled"{% endif %}>
+    <li class="page-item{% if not page_obj.has_previous %} disabled{% endif %}">
       <a
         {% if page_obj.has_previous %}
           rel="prev"
           {# djlint:off #}
           href="?page={{ page_obj.previous_page_number }}&amp;limit={{ page_obj.paginator.per_page }}{% if page_obj.paginator.sort_by %}&amp;sort_by={{ page_obj.paginator.sort_by }}{% endif %}{% if query_string %}&amp;{{ query_string }}{% endif %}{% if anchor %}#{{ anchor }}{% endif %}"
           {# djlint:on #}
         {% endif %}
-        class="green">
+        class="page-link green">
         {% if LANGUAGE_BIDI %}
           {% icon "page-next.svg" %}
         {% else %}
           {% icon "page-previous.svg" %}
         {% endif %}
       </a>
     </li>
-    <li>
-      <a class="position-input" title="{% translate "Click to edit position" %}">
+    <li class="page-item">
+      <a class="page-link position-input"
+         title="{% translate "Click to edit position" %}"
+         href="#">
         {% blocktranslate with position=page_obj.number total=page_obj.paginator.num_pages %}{{ position }} / {{ total }}{% endblocktranslate %}
       </a>
       <a class="position-input-editable" title="{% translate "Go to position" %}">
@@ -64,25 +66,25 @@
           {% if not paginator_form %}</form>{% endif %}
       </a>
     </li>
-    <li {% if not page_obj.has_next %}class="disabled"{% endif %}>
+    <li class="page-item{% if not page_obj.has_next %} disabled{% endif %}">
       <a
         {% if page_obj.has_next %}
           rel="next"
           {# djlint:off #}
           href="?page={{ page_obj.next_page_number }}&amp;limit={{ page_obj.paginator.per_page }}{% if page_obj.paginator.sort_by %}&amp;sort_by={{ page_obj.paginator.sort_by }}{% endif %}{% if query_string %}&amp;{{ query_string }}{% endif %}{% if anchor %}#{{ anchor }}{% endif %}"
           {# djlint:on #}
         {% endif %}
-        class="green">
+        class="page-link green">
         {% if not LANGUAGE_BIDI %}
           {% icon "page-next.svg" %}
         {% else %}
           {% icon "page-previous.svg" %}
         {% endif %}
       </a>
     </li>
-    <li {% if page_obj.paginator.num_pages == page_obj.number %}class="disabled"{% endif %}>
+    <li class="page-item{% if page_obj.paginator.num_pages == page_obj.number %} disabled{% endif %}">
       <a href="?page={{ page_obj.paginator.num_pages }}&amp;limit={{ page_obj.paginator.per_page }}{% if page_obj.paginator.sort_by %}&amp;sort_by={{ page_obj.paginator.sort_by }}{% endif %}{% if query_string %}&amp;{{ query_string }}{% endif %}{% if anchor %}#{{ anchor }}{% endif %}"
-         class="green">
+         class="page-link green">
         {% if not LANGUAGE_BIDI %}
           {% icon "page-last.svg" %}
         {% else %}

weblate/templates/trans/change_list.html

@@ -14,7 +14,7 @@
     </li>
   {% endif %}
 
-  <div class="btn-group float-end btn-group-settings" role="group">
+  <div class="btn-group ms-auto btn-group-settings" role="group">
     {% if debug %}
       {% if path_object %}
         <a href="{% url 'changes' path=path_object.get_url_path %}?{{ query_string }}&amp;digest=1"