From 89ecad9c50b270eebe81ef90d1978466600f0bbb Mon Sep 17 00:00:00 2001
From: Anton Krytskyi <ant.krytskyi@gmail.com>
Date: Wed, 11 Jun 2025 18:38:14 +0300
Subject: [PATCH] fix content overflow for node page

---
 admin/templates/nodes/contributors.html | 98 +++++++++++++------------
 admin/templates/nodes/node.html         |  2 +-
 2 files changed, 51 insertions(+), 49 deletions(-)

diff --git a/admin/templates/nodes/contributors.html b/admin/templates/nodes/contributors.html
index 373f121cb2a..945e0bf7578 100644
--- a/admin/templates/nodes/contributors.html
+++ b/admin/templates/nodes/contributors.html
@@ -3,58 +3,60 @@
 <tr>
     <td>Contributors</td>
     <td>
-        <table class="table table-bordered table-hover">
-            <thead>
-                <tr>
-                    <td>Email</td>
-                    <td>Name</td>
-                    <td>Permissions</td>
-                    <td>Actions</td>
-                    {%  if perms.osf.change_node %}
-                        <td></td>
-                    {% endif %}
-                </tr>
-            </thead>
-            <tbody>
-                {% for user in node.contributors %}
+        <div style="overflow-x: auto; width: 100%;">
+            <table class="table table-bordered table-hover">
+                <thead>
                     <tr>
-                        <td>
-                            <a href="{{ user | reverse_user }}">
-                                {{ user }}
-                            </a>
-                        </td>
-                        <td>{{ user.fullname }}</td>
-                        <td>{% get_permissions user node %}</td>
+                        <td>Email</td>
+                        <td>Name</td>
+                        <td>Permissions</td>
+                        <td>Actions</td>
                         {%  if perms.osf.change_node %}
+                            <td></td>
+                        {% endif %}
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for user in node.contributors %}
+                        <tr>
                             <td>
-                                <a data-toggle="modal" data-target="#{{ user.id }}Modal" class="btn btn-danger">Remove</a>
-                                <div class="modal" id="{{ user.id }}Modal">
-                                    <div class="modal-dialog">
-                                        <div class="modal-content">
-                                            <form class="well" method="post" action="{% url 'nodes:remove-user'  guid=node.guid user_id=user.id  %}">
-                                                <div class="modal-header">
-                                                    <button type="button" class="close" data-dismiss="modal">x</button>
-                                                    <h3>Removing contributor: {{ user.username }}</h3>
-                                                </div>
-                                                <div class="modal-body">
-                                                    User will be removed. Currently only an admin on this node type will be able to add them back.
-                                                    {% csrf_token %}
-                                                </div>
-                                                <div class="modal-footer">
-                                                    <input class="btn btn-danger" type="submit" value="Confirm" />
-                                                    <button type="button" class="btn btn-default" data-dismiss="modal">
-                                                        Cancel
-                                                    </button>
-                                                </div>
-                                            </form>
+                                <a href="{{ user | reverse_user }}">
+                                    {{ user }}
+                                </a>
+                            </td>
+                            <td>{{ user.fullname }}</td>
+                            <td>{% get_permissions user node %}</td>
+                            {%  if perms.osf.change_node %}
+                                <td>
+                                    <a data-toggle="modal" data-target="#{{ user.id }}Modal" class="btn btn-danger">Remove</a>
+                                    <div class="modal" id="{{ user.id }}Modal">
+                                        <div class="modal-dialog">
+                                            <div class="modal-content">
+                                                <form class="well" method="post" action="{% url 'nodes:remove-user'  guid=node.guid user_id=user.id  %}">
+                                                    <div class="modal-header">
+                                                        <button type="button" class="close" data-dismiss="modal">x</button>
+                                                        <h3>Removing contributor: {{ user.username }}</h3>
+                                                    </div>
+                                                    <div class="modal-body">
+                                                        User will be removed. Currently only an admin on this node type will be able to add them back.
+                                                        {% csrf_token %}
+                                                    </div>
+                                                    <div class="modal-footer">
+                                                        <input class="btn btn-danger" type="submit" value="Confirm" />
+                                                        <button type="button" class="btn btn-default" data-dismiss="modal">
+                                                            Cancel
+                                                        </button>
+                                                    </div>
+                                                </form>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            </td>
-                        {% endif %}
-                    </tr>
-                {% endfor %}
-            </tbody>
-        </table>
+                                </td>
+                            {% endif %}
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
     </td>
 </tr>
\ No newline at end of file
diff --git a/admin/templates/nodes/node.html b/admin/templates/nodes/node.html
index 33b5731e32c..dba2973116b 100644
--- a/admin/templates/nodes/node.html
+++ b/admin/templates/nodes/node.html
@@ -27,7 +27,7 @@
                 </div>
             </div>
         </div>
-        <div class="row">
+        <div class="row" style="overflow-x: auto; width: 100%;">
             <h2>{{ node.type|cut:'osf.'|title }}: <b>{{ node.title }}</b> <a href="{{ node.absolute_url }}"> ({{node.guid}})</a> </h2>
             <table class="table table-striped">
                 <thead>