Scrollable tables in settings pages (#4857)

* Scrollable tables in settings pages

* Add space before curly brace

app/javascript/styles/admin.scss

@@ -190,11 +190,15 @@
 
 .filters {
   display: flex;
-  margin-bottom: 20px;
+  flex-wrap: wrap;
 
   .filter-subset {
     flex: 0 0 auto;
-    margin-right: 40px;
+    margin: 0 40px 10px 0;
+
+    &:last-child {
+      margin-bottom: 20px;
+    }
 
     ul {
       margin-top: 5px;

app/javascript/styles/tables.scss

@@ -3,7 +3,6 @@
   max-width: 100%;
   border-spacing: 0;
   border-collapse: collapse;
-  margin-bottom: 20px;
 
   th,
   td {
@@ -43,19 +42,17 @@
     font-weight: 500;
   }
 
-  &.inline-table {
-    td,
-    th {
-      padding: 8px 2px;
-    }
-
-    & > tbody > tr:nth-child(odd) > td,
-    & > tbody > tr:nth-child(odd) > th {
-      background: transparent;
-    }
+  &.inline-table > tbody > tr:nth-child(odd) > td,
+  &.inline-table > tbody > tr:nth-child(odd) > th {
+    background: transparent;
   }
 }
 
+.table-wrapper {
+  overflow: auto;
+  margin-bottom: 20px;
+}
+
 samp {
   font-family: 'mastodon-font-monospace', monospace;
 }

app/views/admin/accounts/_card.html.haml

-%table.table
-  %tbody
-    %tr
-      %td= t('admin.accounts.show.created_reports')
-      %td= link_to pluralize(account.reports.count, t('admin.accounts.show.report')), admin_reports_path(account_id: account.id)
-    %tr
-      %td= t('admin.accounts.show.targeted_reports')
-      %td= link_to pluralize(account.targeted_reports.count, t('admin.accounts.show.report')), admin_reports_path(target_account_id: account.id)
-    - if account.silenced? || account.suspended?
+.table-wrapper
+  %table.table
+    %tbody
       %tr
-        %td= t('admin.accounts.moderation.title')
-        %td
-          - if account.silenced?
-            %p= t('admin.accounts.moderation.silenced')
-          - if account.suspended?
-            %p= t('admin.accounts.moderation.suspended')
+        %td= t('admin.accounts.show.created_reports')
+        %td= link_to pluralize(account.reports.count, t('admin.accounts.show.report')), admin_reports_path(account_id: account.id)
+      %tr
+        %td= t('admin.accounts.show.targeted_reports')
+        %td= link_to pluralize(account.targeted_reports.count, t('admin.accounts.show.report')), admin_reports_path(target_account_id: account.id)
+      - if account.silenced? || account.suspended?
+        %tr
+          %td= t('admin.accounts.moderation.title')
+          %td
+            - if account.silenced?
+              %p= t('admin.accounts.moderation.silenced')
+            - if account.suspended?
+              %p= t('admin.accounts.moderation.suspended')

app/views/admin/accounts/index.html.haml

@@ -50,16 +50,17 @@
       %button= t('admin.accounts.search')
       = link_to t('admin.accounts.reset'), admin_accounts_path, class: 'button negative'
 
-%table.table
-  %thead
-    %tr
-      %th= t('admin.accounts.username')
-      %th= t('admin.accounts.domain')
-      %th= t('admin.accounts.protocol')
-      %th= t('admin.accounts.confirmed')
-      %th= fa_icon 'paper-plane-o'
-      %th
-  %tbody
-    = render @accounts
+.table-wrapper
+  %table.table
+    %thead
+      %tr
+        %th= t('admin.accounts.username')
+        %th= t('admin.accounts.domain')
+        %th= t('admin.accounts.protocol')
+        %th= t('admin.accounts.confirmed')
+        %th= fa_icon 'paper-plane-o'
+        %th
+    %tbody
+      = render @accounts
 
 = paginate @accounts

app/views/admin/accounts/show.html.haml

 - content_for :page_title do
   = @account.acct
 
-%table.table
-  %tbody
-    %tr
-      %th= t('admin.accounts.username')
-      %td= @account.username
-    %tr
-      %th= t('admin.accounts.domain')
-      %td= @account.domain
-    %tr
-      %th= t('admin.accounts.display_name')
-      %td= @account.display_name
-
-    - if @account.local?
-      %tr
-        %th= t('admin.accounts.email')
-        %td= @account.user_email
+.table-wrapper
+  %table.table
+    %tbody
       %tr
-        %th= t('admin.accounts.most_recent_ip')
-        %td= @account.user_current_sign_in_ip
-      %tr
-        %th= t('admin.accounts.most_recent_activity')
-        %td
-          - if @account.user_current_sign_in_at
-            %time.formatted{ datetime: @account.user_current_sign_in_at.iso8601, title: l(@account.user_current_sign_in_at) }
-              = l @account.user_current_sign_in_at
-          - else
-            Never
-    - else
+        %th= t('admin.accounts.username')
+        %td= @account.username
       %tr
-        %th= t('admin.accounts.profile_url')
-        %td= link_to @account.url, @account.url
+        %th= t('admin.accounts.domain')
+        %td= @account.domain
       %tr
-        %th= t('admin.accounts.protocol')
-        %td= @account.protocol.humanize
+        %th= t('admin.accounts.display_name')
+        %td= @account.display_name
 
-      - if @account.ostatus?
+      - if @account.local?
         %tr
-          %th= t('admin.accounts.feed_url')
-          %td= link_to @account.remote_url, @account.remote_url
+          %th= t('admin.accounts.email')
+          %td= @account.user_email
         %tr
-          %th= t('admin.accounts.push_subscription_expires')
+          %th= t('admin.accounts.most_recent_ip')
+          %td= @account.user_current_sign_in_ip
+        %tr
+          %th= t('admin.accounts.most_recent_activity')
           %td
-            - if @account.subscribed?
-              %time.formatted{ datetime: @account.subscription_expires_at.iso8601, title: l(@account.subscription_expires_at) }
-                = l @account.subscription_expires_at
+            - if @account.user_current_sign_in_at
+              %time.formatted{ datetime: @account.user_current_sign_in_at.iso8601, title: l(@account.user_current_sign_in_at) }
+                = l @account.user_current_sign_in_at
             - else
-              = t('admin.accounts.not_subscribed')
-        %tr
-          %th= t('admin.accounts.salmon_url')
-          %td= link_to @account.salmon_url, @account.salmon_url
-      - elsif @account.activitypub?
+              Never
+      - else
         %tr
-          %th= t('admin.accounts.inbox_url')
-          %td= link_to @account.inbox_url, @account.inbox_url
+          %th= t('admin.accounts.profile_url')
+          %td= link_to @account.url, @account.url
         %tr
-          %th= t('admin.accounts.outbox_url')
-          %td= link_to @account.outbox_url, @account.outbox_url
+          %th= t('admin.accounts.protocol')
+          %td= @account.protocol.humanize
 
-    %tr
-      %th= t('admin.accounts.follows')
-      %td= @account.following_count
-    %tr
-      %th= t('admin.accounts.followers')
-      %td= @account.followers_count
-    %tr
-      %th= t('admin.accounts.statuses')
-      %td= link_to @account.statuses_count, admin_account_statuses_path(@account.id)
-    %tr
-      %th= t('admin.accounts.media_attachments')
-      %td
-        = link_to @account.media_attachments.count, admin_account_statuses_path(@account.id, { media: true })
-        = surround '(', ')' do
-          = number_to_human_size @account.media_attachments.sum('file_file_size')
-    %tr
-      %th= t('.created_reports')
-      %td= link_to pluralize(@account.reports.count, t('.report')), admin_reports_path(account_id: @account.id)
-    %tr
-      %th= t('.targeted_reports')
-      %td= link_to pluralize(@account.targeted_reports.count, t('.report')), admin_reports_path(target_account_id: @account.id)
+        - if @account.ostatus?
+          %tr
+            %th= t('admin.accounts.feed_url')
+            %td= link_to @account.remote_url, @account.remote_url
+          %tr
+            %th= t('admin.accounts.push_subscription_expires')
+            %td
+              - if @account.subscribed?
+                %time.formatted{ datetime: @account.subscription_expires_at.iso8601, title: l(@account.subscription_expires_at) }
+                  = l @account.subscription_expires_at
+              - else
+                = t('admin.accounts.not_subscribed')
+          %tr
+            %th= t('admin.accounts.salmon_url')
+            %td= link_to @account.salmon_url, @account.salmon_url
+        - elsif @account.activitypub?
+          %tr
+            %th= t('admin.accounts.inbox_url')
+            %td= link_to @account.inbox_url, @account.inbox_url
+          %tr
+            %th= t('admin.accounts.outbox_url')
+            %td= link_to @account.outbox_url, @account.outbox_url
 
+      %tr
+        %th= t('admin.accounts.follows')
+        %td= @account.following_count
+      %tr
+        %th= t('admin.accounts.followers')
+        %td= @account.followers_count
+      %tr
+        %th= t('admin.accounts.statuses')
+        %td= link_to @account.statuses_count, admin_account_statuses_path(@account.id)
+      %tr
+        %th= t('admin.accounts.media_attachments')
+        %td
+          = link_to @account.media_attachments.count, admin_account_statuses_path(@account.id, { media: true })
+          = surround '(', ')' do
+            = number_to_human_size @account.media_attachments.sum('file_file_size')
+      %tr
+        %th= t('.created_reports')
+        %td= link_to pluralize(@account.reports.count, t('.report')), admin_reports_path(account_id: @account.id)
+      %tr
+        %th= t('.targeted_reports')
+        %td= link_to pluralize(@account.targeted_reports.count, t('.report')), admin_reports_path(target_account_id: @account.id)
 
 %div{ style: 'float: right' }
   - if @account.local?

app/views/admin/domain_blocks/index.html.haml

 - content_for :page_title do
   = t('admin.domain_blocks.title')
 
-%table.table
-  %thead
-    %tr
-      %th= t('admin.domain_blocks.domain')
-      %th= t('admin.domain_blocks.severity')
-      %th= t('admin.domain_blocks.reject_media')
-      %th
-  %tbody
-    = render @domain_blocks
+.table-wrapper
+  %table.table
+    %thead
+      %tr
+        %th= t('admin.domain_blocks.domain')
+        %th= t('admin.domain_blocks.severity')
+        %th= t('admin.domain_blocks.reject_media')
+        %th
+    %tbody
+      = render @domain_blocks
 
 = paginate @domain_blocks
 = link_to t('admin.domain_blocks.add_new'), new_admin_domain_block_path, class: 'button'

app/views/admin/instances/index.html.haml

 - content_for :page_title do
   = t('admin.instances.title')
 
-%table.table
-  %thead
-    %tr
-      %th= t('admin.instances.domain_name')
-      %th= t('admin.instances.account_count')
-  %tbody
-    = render @instances
+.table-wrapper
+  %table.table
+    %thead
+      %tr
+        %th= t('admin.instances.domain_name')
+        %th= t('admin.instances.account_count')
+    %tbody
+      = render @instances
 
 = paginate paginated_instances

app/views/admin/reports/index.html.haml

@@ -10,17 +10,18 @@
 
 = form_tag do
 
-  %table.table
-    %thead
-      %tr
-        -# %th
-        %th= t('admin.reports.id')
-        %th= t('admin.reports.target')
-        %th= t('admin.reports.reported_by')
-        %th= t('admin.reports.comment.label')
-        %th= t('admin.reports.report_contents')
-        %th
-    %tbody
-      = render @reports
+  .table-wrapper
+    %table.table
+      %thead
+        %tr
+          -# %th
+          %th= t('admin.reports.id')
+          %th= t('admin.reports.target')
+          %th= t('admin.reports.reported_by')
+          %th= t('admin.reports.comment.label')
+          %th= t('admin.reports.report_contents')
+          %th
+      %tbody
+        = render @reports
 
 = paginate @reports

app/views/admin/subscriptions/index.html.haml

 - content_for :page_title do
   = t('admin.subscriptions.title')
 
-%table.table
-  %thead
-    %tr
-      %th= t('admin.subscriptions.topic')
-      %th= t('admin.subscriptions.callback_url')
-      %th= t('admin.subscriptions.confirmed')
-      %th= t('admin.subscriptions.expires_in')
-      %th= t('admin.subscriptions.last_delivery')
-  %tbody
-    = render @subscriptions
+.table-wrapper
+  %table.table
+    %thead
+      %tr
+        %th= t('admin.subscriptions.topic')
+        %th= t('admin.subscriptions.callback_url')
+        %th= t('admin.subscriptions.confirmed')
+        %th= t('admin.subscriptions.expires_in')
+        %th= t('admin.subscriptions.last_delivery')
+    %tbody
+      = render @subscriptions
 
 = paginate @subscriptions

app/views/auth/registrations/_sessions.html.haml

 %h6= t 'sessions.title'
 %p.muted-hint= t 'sessions.explanation'
 
-%table.table.inline-table
-  %thead
-    %tr
-      %th= t 'sessions.browser'
-      %th= t 'sessions.ip'
-      %th= t 'sessions.activity'
-      %td
-  %tbody
-    - @sessions.each do |session|
+.table-wrapper
+  %table.table.inline-table
+    %thead
       %tr
+        %th= t 'sessions.browser'
+        %th= t 'sessions.ip'
+        %th= t 'sessions.activity'
         %td
-          %span{ title: session.user_agent }<
-            = fa_icon "#{session_device_icon(session)} fw", 'aria-label' => session_device_icon(session)
-            = ' '
-            = t 'sessions.description', browser: t("sessions.browsers.#{session.browser}"), platform: t("sessions.platforms.#{session.platform}")
-        %td
-          %samp= session.ip
-        %td
-          - if current_session.session_id == session.session_id
-            = t 'sessions.current_session'
-          - else
-            %time.time-ago{ datetime: session.updated_at.iso8601, title: l(session.updated_at) }= l(session.updated_at)
-        %td
-          - if current_session.session_id != session.session_id
-            = table_link_to 'times', t('sessions.revoke'), settings_session_path(session), method: :delete
+    %tbody
+      - @sessions.each do |session|
+        %tr
+          %td
+            %span{ title: session.user_agent }<
+              = fa_icon "#{session_device_icon(session)} fw", 'aria-label' => session_device_icon(session)
+              = ' '
+              = t 'sessions.description', browser: t("sessions.browsers.#{session.browser}"), platform: t("sessions.platforms.#{session.platform}")
+          %td
+            %samp= session.ip
+          %td
+            - if current_session.session_id == session.session_id
+              = t 'sessions.current_session'
+            - else
+              %time.time-ago{ datetime: session.updated_at.iso8601, title: l(session.updated_at) }= l(session.updated_at)
+          %td
+            - if current_session.session_id != session.session_id
+              = table_link_to 'times', t('sessions.revoke'), settings_session_path(session), method: :delete

app/views/oauth/authorized_applications/index.html.haml

 - content_for :page_title do
   = t('doorkeeper.authorized_applications.index.title')
 
-%table.table
-  %thead
-    %tr
-      %th= t('doorkeeper.authorized_applications.index.application')
-      %th= t('doorkeeper.authorized_applications.index.scopes')
-      %th= t('doorkeeper.authorized_applications.index.created_at')
-      %th
-  %tbody
-    - @applications.each do |application|
+.table-wrapper
+  %table.table
+    %thead
       %tr
-        %td
-          - if application.website.blank?
-            = application.name
-          - else
-            = link_to application.name, application.website, target: '_blank', rel: 'noopener'
-        %th!= application.scopes.map { |scope| t(scope, scope: [:doorkeeper, :scopes]) }.join('<br />')
-        %td= l application.created_at
-        %td
-          - unless application.superapp?
-            = table_link_to 'times', t('doorkeeper.authorized_applications.buttons.revoke'), oauth_authorized_application_path(application), method: :delete, data: { confirm: t('doorkeeper.authorized_applications.confirmations.revoke') }
+        %th= t('doorkeeper.authorized_applications.index.application')
+        %th= t('doorkeeper.authorized_applications.index.scopes')
+        %th= t('doorkeeper.authorized_applications.index.created_at')
+        %th
+    %tbody
+      - @applications.each do |application|
+        %tr
+          %td
+            - if application.website.blank?
+              = application.name
+            - else
+              = link_to application.name, application.website, target: '_blank', rel: 'noopener'
+          %th!= application.scopes.map { |scope| t(scope, scope: [:doorkeeper, :scopes]) }.join('<br />')
+          %td= l application.created_at
+          %td
+            - unless application.superapp?
+              = table_link_to 'times', t('doorkeeper.authorized_applications.buttons.revoke'), oauth_authorized_application_path(application), method: :delete, data: { confirm: t('doorkeeper.authorized_applications.confirmations.revoke') }

app/views/settings/applications/index.html.haml

 - content_for :page_title do
   = t('doorkeeper.applications.index.title')
 
-%table.table
-  %thead
-    %tr
-      %th= t('doorkeeper.applications.index.application')
-      %th= t('doorkeeper.applications.index.scopes')
-      %th
-  %tbody
-    - @applications.each do |application|
+.table-wrapper
+  %table.table
+    %thead
       %tr
-        %td= link_to application.name, settings_application_path(application)
-        %th= application.scopes
-        %td
-          = table_link_to 'times', t('doorkeeper.applications.index.delete'), settings_application_path(application), method: :delete, data: { confirm: t('doorkeeper.applications.confirmations.destroy') }
+        %th= t('doorkeeper.applications.index.application')
+        %th= t('doorkeeper.applications.index.scopes')
+        %th
+    %tbody
+      - @applications.each do |application|
+        %tr
+          %td= link_to application.name, settings_application_path(application)
+          %th= application.scopes
+          %td
+            = table_link_to 'times', t('doorkeeper.applications.index.delete'), settings_application_path(application), method: :delete, data: { confirm: t('doorkeeper.applications.confirmations.destroy') }
 
 = paginate @applications
 = link_to t('doorkeeper.applications.index.new'), new_settings_application_path, class: 'button'

app/views/settings/applications/show.html.haml

@@ -3,22 +3,23 @@
 
 %p.hint= t('applications.warning')
 
-%table.table
-  %tbody
-    %tr  
-      %th= t('doorkeeper.applications.show.application_id')
-      %td
-        %code= @application.uid
-    %tr
-      %th= t('doorkeeper.applications.show.secret')
-      %td
-        %code= @application.secret
-    %tr
-      %th{ rowspan: 2}= t('applications.your_token')
-      %td
-        %code= current_user.token_for_app(@application).token
-    %tr
-      %td= table_link_to 'refresh', t('applications.regenerate_token'), regenerate_settings_application_path(@application), method: :post
+.table-wrapper
+  %table.table
+    %tbody
+      %tr  
+        %th= t('doorkeeper.applications.show.application_id')
+        %td
+          %code= @application.uid
+      %tr
+        %th= t('doorkeeper.applications.show.secret')
+        %td
+          %code= @application.secret
+      %tr
+        %th{ rowspan: 2}= t('applications.your_token')
+        %td
+          %code= current_user.token_for_app(@application).token
+      %tr
+        %td= table_link_to 'refresh', t('applications.regenerate_token'), regenerate_settings_application_path(@application), method: :post
 
 %hr/
 

app/views/settings/exports/show.html.haml

 - content_for :page_title do
   = t('settings.export')
 
-%table.table
-  %tbody
-    %tr
-      %th= t('exports.storage')
-      %td= number_to_human_size @export.total_storage
-      %td
-    %tr
-      %th= t('exports.follows')
-      %td= @export.total_follows
-      %td= table_link_to 'download', t('exports.csv'), settings_exports_follows_path(format: :csv)
-    %tr
-      %th= t('exports.blocks')
-      %td= @export.total_blocks
-      %td= table_link_to 'download', t('exports.csv'), settings_exports_blocks_path(format: :csv)
-    %tr
-      %th= t('exports.mutes')
-      %td= @export.total_mutes
-      %td= table_link_to 'download', t('exports.csv'), settings_exports_mutes_path(format: :csv)
+.table-wrapper
+  %table.table
+    %tbody
+      %tr
+        %th= t('exports.storage')
+        %td= number_to_human_size @export.total_storage
+        %td
+      %tr
+        %th= t('exports.follows')
+        %td= @export.total_follows
+        %td= table_link_to 'download', t('exports.csv'), settings_exports_follows_path(format: :csv)
+      %tr
+        %th= t('exports.blocks')
+        %td= @export.total_blocks
+        %td= table_link_to 'download', t('exports.csv'), settings_exports_blocks_path(format: :csv)
+      %tr
+        %th= t('exports.mutes')
+        %td= @export.total_mutes
+        %td= table_link_to 'download', t('exports.csv'), settings_exports_mutes_path(format: :csv)

app/views/settings/follower_domains/show.html.haml

@@ -12,20 +12,21 @@
   %p= t('followers.explanation_html')
   %p= t('followers.true_privacy_html')
 
-  %table.table
-    %thead
-      %tr
-        %th
-        %th= t('followers.domain')
-        %th= t('followers.followers_count')
-    %tbody
-      - @domains.each do |domain|
+  .table-wrapper
+    %table.table
+      %thead
         %tr
-          %td
-            = check_box_tag 'select[]', domain.domain, false, disabled: !@account.locked? unless domain.domain.nil?
-          %td
-            %samp= domain.domain.presence || Rails.configuration.x.local_domain
-          %td= number_with_delimiter domain.accounts_from_domain
+          %th
+          %th= t('followers.domain')
+          %th= t('followers.followers_count')
+      %tbody
+        - @domains.each do |domain|
+          %tr
+            %td
+              = check_box_tag 'select[]', domain.domain, false, disabled: !@account.locked? unless domain.domain.nil?
+            %td
+              %samp= domain.domain.presence || Rails.configuration.x.local_domain
+            %td= number_with_delimiter domain.accounts_from_domain
 
   .action-pagination
     .actions