Fix spacing classes for Bootstrap 5

app/views/admin/dashboard/_sidekiq.html.haml

@@ -2,7 +2,7 @@
   .card-header
     %a.d-flex{ href: sidekiq_web_path }
       %strong= t(".title")
-      %i.fa.fa-chevron-right.ml-auto.align-self-center
+      %i.fa.fa-chevron-right.ms-auto.align-self-center
   - unless @sidekiq[:processes].count.positive?
     .card-body.bg-danger.text-light
       = t(".error_html", env: Rails.env)
@@ -10,13 +10,13 @@
   .list-group
     .list-group-item.d-flex
       %span= t(".processes")
-      %span.ml-auto= @sidekiq[:processes].count
+      %span.ms-auto= @sidekiq[:processes].count
     .list-group-item.d-flex
       %span= t(".enqueued")
-      %span.ml-auto= @sidekiq[:stats].enqueued
+      %span.ms-auto= @sidekiq[:stats].enqueued
     .list-group-item.d-flex
       %span= t(".retries")
-      %span.ml-auto= @sidekiq[:stats].retry_size
+      %span.ms-auto= @sidekiq[:stats].retry_size
     .list-group-item.d-flex
       %span= t(".dead")
-      %span.ml-auto= @sidekiq[:stats].dead_size
+      %span.ms-auto= @sidekiq[:stats].dead_size

app/views/application/_questionbox.html.haml

@@ -36,7 +36,7 @@
                   %input{ name: "qb-anonymous", type: :hidden, value: false }/
             .col-6
               %p.pull-right
-                %span.text-muted.mr-1{ data: { "character-count-target": "counter" } } 512
+                %span.text-muted.me-1{ data: { "character-count-target": "counter" } } 512
                 %input{ name: "qb-to", type: "hidden", value: user.id }/
                 %button.btn.btn-primary{ name: "qb-ask",
                   type: :button,

app/views/discover/_userbox.html.haml

@@ -3,7 +3,7 @@
     .media
       .pull-left
         %a{ href: user_path(u) }
-          %img.avatar-md.mr-2{ src: u.profile_picture.url(:medium) }
+          %img.avatar-md.me-2{ src: u.profile_picture.url(:medium) }
       .media-body
         %h6.media-heading.answerbox__question-user
           - if u.profile.display_name.blank?

app/views/inbox/_actions.html.haml

@@ -4,10 +4,10 @@
       = bootstrap_form_tag url: inbox_path, method: :get, html: { class: "d-block" } do |f|
         = f.text_field :author, value: params[:author], placeholder: t(".author.placeholder"), prepend: "@", hide_label: true,
           append: f.button(t(".author.button"), name: nil, class: "btn btn-light", id: "ib-author")
-      .d-flex.ml-auto.mt-2.mt-md-0
+      .d-flex.ms-auto.mt-2.mt-md-0
-        = button_to inbox_create_path, class: "btn btn-info mr-auto" do
+        = button_to inbox_create_path, class: "btn btn-info me-auto" do
           = t(".questions.button")
-        .button-group.ml-1
+        .button-group.ms-1
           %button.btn.btn-default{ title: t(".share.heading"), data: { toggle: :dropdown }, aria: { expanded: false } }
             %i.fa.fa-fw.fa-share-alt
             %span.sr-only= t(".share.heading")
@@ -18,6 +18,6 @@
             %a.dropdown-item{ href: "https://www.tumblr.com/share/link?url=#{user_url(current_user)}&name=Ask%20me%20anything%21", target: "_blank" }
               %i.fa.fa-fw.fa-tumblr
               = t(".share.button", service: "Tumblr")
-        %button.btn.btn-danger.ml-1{ type: :button, title: t(".actions.delete"), id: delete_id, disabled: (disabled ? :disabled : nil), data: { ib_count: inbox_count } }
+        %button.btn.btn-danger.ms-1{ type: :button, title: t(".actions.delete"), id: delete_id, disabled: (disabled ? :disabled : nil), data: { ib_count: inbox_count } }
           %i.fa.fa-fw.fa-trash-o
           %span.sr-only= t(".actions.delete")

app/views/navigation/_desktop.html.haml

@@ -5,7 +5,7 @@
         = render inline: Rails.application.config.justask_svg_logo
       - else
         = APP_CONFIG["site_name"]
-    %ul.nav.navbar-nav.mr-auto
+    %ul.nav.navbar-nav.me-auto
       = nav_entry t("navigation.timeline"), root_path, icon: 'home'
       = nav_entry t("navigation.inbox"), '/inbox', icon: 'inbox', badge: inbox_count
       - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?

app/views/navigation/_guest.html.haml

@@ -9,6 +9,6 @@
       %span.sr-only= t("navigation.toggle")
       %span.navbar-toggler-icon
     .collapse.navbar-collapse#j2-main-navbar-collapse
-      %ul.nav.navbar-nav.ml-auto
+      %ul.nav.navbar-nav.ms-auto
         = nav_entry t("voc.login"), new_user_session_path
         = nav_entry t("voc.register"), new_user_registration_path

app/views/notifications/type/_webpushsubscription.html.haml

@@ -2,7 +2,7 @@
   .notification__icon
     %span.fa-stack
       %i.fa.fa-2x.fa-fw.fa-bell
-      %i.fa.fa-stack-1x.fa-fw.fa-exclamation-triangle.text-danger.pl-2
+      %i.fa.fa-stack-1x.fa-fw.fa-exclamation-triangle.text-danger.ps-2
   .media-body
     %h6.media-heading.notification__user
       = t(".heading")

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

@@ -6,11 +6,11 @@
       - @blocks.each do |block|
         %li.list-group-item
           .d-flex
-            %img.avatar-md.d-none.d-sm-inline.mr-2{ src: block.target.profile_picture.url(:small) }
+            %img.avatar-md.d-none.d-sm-inline.me-2{ src: block.target.profile_picture.url(:small) }
             %div
               %p.mb-0= user_screen_name(block.target)
               %p.text-muted.mb-0= t(".blocked", time: time_ago_in_words(block.created_at))
-            .ml-auto.d-inline-flex
+            .ms-auto.d-inline-flex
               %button.btn.btn-default.align-self-center{ data: { action: :unblock, target: block.target.screen_name } }
                 %span.pe-none= t("voc.unblock")
 

app/views/settings/mutes/_user.html.haml

@@ -1,6 +1,6 @@
 .d-flex.mb-2
-  %img.avatar-md.mr-2{ src: user.profile_picture.url(:small), loading: :lazy }
+  %img.avatar-md.me-2{ src: user.profile_picture.url(:small), loading: :lazy }
   %p.align-self-center.m-0= user_screen_name(user, context_user: current_user)
-  .ml-auto.d-inline-flex
+  .ms-auto.d-inline-flex
     %button.btn.btn-default.align-self-center{ data: { action: :unmute, target: user.screen_name } }
       %span.pe-none= t("voc.unmute")

app/views/settings/profile/edit.html.haml

@@ -4,7 +4,7 @@
 
       .media#profile-picture-media
         .pull-left
-          %img.avatar-lg.mr-3{ src: current_user.profile_picture.url(:medium) }
+          %img.avatar-lg.me-3{ src: current_user.profile_picture.url(:medium) }
         .media-body
           = f.file_field :profile_picture, accept: APP_CONFIG[:accepted_image_formats].join(",")
 
@@ -15,8 +15,8 @@
 
       .row.mb-2#profile-header-media
         .col
-          %img.mw-100.mr-3{ src: current_user.profile_header.url(:mobile) }
+          %img.mw-100.me-3{ src: current_user.profile_header.url(:mobile) }
-        .col-xs-12.mt-3.mt-sm-0.pl-3.pr-3
+        .col-xs-12.mt-3.mt-sm-0.ps-3.pe-3
           = f.file_field :profile_header, accept: APP_CONFIG[:accepted_image_formats].join(",")
 
       .row.d-none#profile-header-crop-controls

app/views/settings/two_factor_authentication/otp_authentication/_totp_setup.html.haml

@@ -10,7 +10,7 @@
     .totp-setup__content.col
       = bootstrap_form_for(current_user, url: settings_two_factor_authentication_otp_authentication_path, data: { turbo: false }) do |f|
         %p= t(".app.none")
-        %ul.list-unstyled.pl-3
+        %ul.list-unstyled.ps-3
           %li
             %i.fa.fa-android
             = t(".app.aegis")

app/views/shared/_anonymous_block.html.haml

@@ -6,6 +6,6 @@
       - else
         %p.mb-0.text-muted.font-italic= t(".deleted_question")
       %p.text-muted.mb-0= t(".blocked", time: time_ago_in_words(block.created_at))
-    .ml-auto.d-inline-flex
+    .ms-auto.d-inline-flex
       = button_to anonymous_block_path, method: :delete, params: { id: block.id }, class: "btn btn-default align-self-center" do
         %span.pe-none= t("voc.unblock")

app/views/shared/_question.html.haml

@@ -5,7 +5,7 @@
       - if type == 'discover'
         .pull-left
           %a{ href: user_screen_name(q.user, link_only: true) }
-            %img.avatar-md.mr-2{ src: q.user&.profile_picture&.url(:small), loading: :lazy }
+            %img.avatar-md.me-2{ src: q.user&.profile_picture&.url(:small), loading: :lazy }
       .media-body
         - if user_signed_in?
           .pull-right