From 08822b0f05a66849c99a0adbba5299503c409512 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Fri, 6 Aug 2021 01:09:28 +0200
Subject: [PATCH] Move answerbox actions on to seperate row on mobile

---
 app/assets/stylesheets/components/_answerbox.scss | 14 ++++++++++++++
 app/views/application/_answerbox.haml             |  8 ++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/components/_answerbox.scss b/app/assets/stylesheets/components/_answerbox.scss
index cc892099..df2a9c64 100644
--- a/app/assets/stylesheets/components/_answerbox.scss
+++ b/app/assets/stylesheets/components/_answerbox.scss
@@ -61,6 +61,20 @@
       }
     }
   }
+
+  &__actions {
+    text-align: right;
+    @include media-breakpoint-down('md') {
+      justify-content: space-between;
+      padding-top: 10px;
+    }
+  }
+
+  @include media-breakpoint-down('md') {
+    .card-body {
+      padding-bottom: .6rem;
+    }
+  }
 }
 
 body:not(.cap-web-share) {
diff --git a/app/views/application/_answerbox.haml b/app/views/application/_answerbox.haml
index 1f427b7d..781754e4 100644
--- a/app/views/application/_answerbox.haml
+++ b/app/views/application/_answerbox.haml
@@ -16,7 +16,7 @@
         = markdown a.content
     - if @user.nil?
       .row
-        .col.col-sm-4.col-md-6.text-left.text-muted
+        .col-sm-6.text-left.text-muted
           .media
             .pull-left
               %a{ href: show_user_profile_path(a.user.screen_name) }
@@ -26,14 +26,14 @@
                 = raw t('views.answerbox.answered', hide: hidespan(t('views.answerbox.hide'), 'd-none d-sm-inline'), user: user_screen_name(a.user))
               .answerbox__answer-date
                 = link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
-        .col.col-sm-8.col-md-6.text-right
+        .col-md-6.d-flex.d-md-block.answerbox__actions
           = render 'answerbox/actions', a: a, display_all: display_all
     - else
       .row
-        .col-4.col-sm-4.col-md-6.text-left.text-muted
+        .col-md-6.text-left.text-muted
           %i.fa.fa-clock-o
           = link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
-        .col-8.col-sm-8.col-md-6.text-right
+        .col-md-6.d-md-flex.answerbox__actions
           = render 'answerbox/actions', a: a, display_all: display_all
   .card-footer{ id: "ab-comments-section-#{a.id}", style: display_all.nil? ? 'display: none' : nil }
     %div{ id: "ab-smiles-#{a.id}" }= render 'answerbox/smiles', a: a