Merge pull request #23639 from overleaf/rd-fix-scrollbar-text-admins

Fix tables and tabs responsiveness on the admin pages

GitOrigin-RevId: 94c8cea8933f4f908c50aa404e45f23642852c15

services/web/app/views/admin/index.pug

@@ -15,91 +15,91 @@ block content
 								h1 Admin Panel
 							.ol-tabs(data-ol-bookmarkable-tabset)
 								.nav-tabs-container
-									ul.nav.nav-tabs(role="tablist")
+									ul.nav.nav-tabs.align-left(role="tablist")
 										+bookmarkable-tabset-header('system-messages', 'System Messages', true)
 										+bookmarkable-tabset-header('open-sockets', 'Open Sockets')
 										+bookmarkable-tabset-header('open-close-editor', 'Open/Close Editor')
 										if hasFeature('saas')
 											+bookmarkable-tabset-header('tpds', 'TPDS/Dropbox Management')
 
-									.tab-content
-										.tab-pane.active(
-											role="tabpanel"
-											id='system-messages'
-										)
-											each message in systemMessages
-												ul.system-messages
-													li.system-message.row-spaced #{message.content}
-											hr
-											form(method='post', action='/admin/messages')
-												input(name="_csrf", type="hidden", value=csrfToken)
-												.form-group
-													label.form-label(for="content")
-													input.form-control(name="content", type="text", placeholder="Message…", required)
-												button.btn.btn-primary(type="submit") Post Message
-											hr
-											form(method='post', action='/admin/messages/clear')
-												input(name="_csrf", type="hidden", value=csrfToken)
-												button.btn.btn-danger(type="submit") Clear all messages
+								.tab-content
+									.tab-pane.active(
+										role="tabpanel"
+										id='system-messages'
+									)
+										each message in systemMessages
+											ul.system-messages
+												li.system-message.row-spaced #{message.content}
+										hr
+										form(method='post', action='/admin/messages')
+											input(name="_csrf", type="hidden", value=csrfToken)
+											.form-group
+												label.form-label(for="content")
+												input.form-control(name="content", type="text", placeholder="Message…", required)
+											button.btn.btn-primary(type="submit") Post Message
+										hr
+										form(method='post', action='/admin/messages/clear')
+											input(name="_csrf", type="hidden", value=csrfToken)
+											button.btn.btn-danger(type="submit") Clear all messages
 
-										.tab-pane(
-											role="tabpanel"
-											id='open-sockets'
-										)
+									.tab-pane(
+										role="tabpanel"
+										id='open-sockets'
+									)
+										.row-spaced
+											ul
+												each agents, url in openSockets
+													li #{url} - total : #{agents.length}
+														ul
+															each agent in agents
+																li #{agent}
+
+									.tab-pane(
+										role="tabpanel"
+										id='open-close-editor'
+									)
+										if hasFeature('saas')
+											| The "Open/Close Editor" feature is not available in SAAS.
+										else
 											.row-spaced
-												ul
-													each agents, url in openSockets
-														li #{url} - total : #{agents.length}
-															ul
-																each agent in agents
-																	li #{agent}
+												form(method='post',action='/admin/closeEditor')
+													input(name="_csrf", type="hidden", value=csrfToken)
+													button.btn.btn-danger(type="submit") Close Editor
+												p.small Will stop anyone opening the editor. Will NOT disconnect already connected users.
 
+											.row-spaced
+												form(method='post',action='/admin/disconnectAllUsers')
+													input(name="_csrf", type="hidden", value=csrfToken)
+													button.btn.btn-danger(type="submit") Disconnect all users
+												p.small Will force disconnect all users with the editor open. Make sure to close the editor first to avoid them reconnecting.
+
+											.row-spaced
+												form(method='post',action='/admin/openEditor')
+													input(name="_csrf", type="hidden", value=csrfToken)
+													button.btn.btn-danger(type="submit") Reopen Editor
+												p.small Will reopen the editor after closing.
+
+									if hasFeature('saas')
 										.tab-pane(
 											role="tabpanel"
-											id='open-close-editor'
+											id='tpds'
 										)
-											if hasFeature('saas')
-												| The "Open/Close Editor" feature is not available in SAAS.
-											else
-												.row-spaced
-													form(method='post',action='/admin/closeEditor')
-														input(name="_csrf", type="hidden", value=csrfToken)
-														button.btn.btn-danger(type="submit") Close Editor
-													p.small Will stop anyone opening the editor. Will NOT disconnect already connected users.
-
-												.row-spaced
-													form(method='post',action='/admin/disconnectAllUsers')
-														input(name="_csrf", type="hidden", value=csrfToken)
-														button.btn.btn-danger(type="submit") Disconnect all users
-													p.small Will force disconnect all users with the editor open. Make sure to close the editor first to avoid them reconnecting.
-
-												.row-spaced
-													form(method='post',action='/admin/openEditor')
-														input(name="_csrf", type="hidden", value=csrfToken)
-														button.btn.btn-danger(type="submit") Reopen Editor
-													p.small Will reopen the editor after closing.
-
-										if hasFeature('saas')
-											.tab-pane(
-												role="tabpanel"
-												id='tpds'
-											)
-												h3 Flush project to TPDS
-												.row
-													form.col-xs-6(method='post',action='/admin/flushProjectToTpds')
-														input(name="_csrf", type="hidden", value=csrfToken)
-														.form-group
-															label.form-label(for='project_id') project_id
-															input.form-control(type='text',  name='project_id', placeholder='project_id', required)
-														.form-group
-															button.btn-primary.btn(type='submit') Flush
-												hr
-												h3 Poll Dropbox for user
-												.row
-													form.col-xs-6(method='post',action='/admin/pollDropboxForUser')
-														input(name="_csrf", type="hidden", value=csrfToken)
-														.form-group
-															label.form-label(for='user_id') user_id
-															input.form-control(type='text',  name='user_id', placeholder='user_id', required)
-														.form-group
-															button.btn-primary.btn(type='submit') Poll
+											h3 Flush project to TPDS
+											.row
+												form.col-xs-6(method='post',action='/admin/flushProjectToTpds')
+													input(name="_csrf", type="hidden", value=csrfToken)
+													.form-group
+														label.form-label(for='project_id') project_id
+														input.form-control(type='text',  name='project_id', placeholder='project_id', required)
+													.form-group
+														button.btn-primary.btn(type='submit') Flush
+											hr
+											h3 Poll Dropbox for user
+											.row
+												form.col-xs-6(method='post',action='/admin/pollDropboxForUser')
+													input(name="_csrf", type="hidden", value=csrfToken)
+													.form-group
+														label.form-label(for='user_id') user_id
+														input.form-control(type='text',  name='user_id', placeholder='user_id', required)
+													.form-group
+														button.btn-primary.btn(type='submit') Poll

services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss

@@ -68,6 +68,11 @@
         border-bottom: 3px solid var(--green-50) !important;
         color: var(--neutral-90) !important;
       }
+
+      &.align-left {
+        margin-left: 0;
+        margin-right: 0;
+      }
     }
   }