Fix question headers overflowing into the answers

app/assets/stylesheets/base.css.scss

@@ -20,16 +20,6 @@ body {
   padding-top: 30px;
 }
 
-.question-page {
-  padding-top: 100px;
-}
-
-@media(max-width: $screen-xs-max) {
-  .question-page {
-    padding-top: 130px;
-  }
-}
-
 .centre {
   text-align: center;
 }

app/assets/stylesheets/scss/panel.scss

@@ -27,6 +27,13 @@
   border-color: #fff;
 }
 
+.panel-question.question-hidden {
+  visibility: hidden;
+  position: relative;
+  box-shadow: none;
+  z-index: -1;
+}
+
 .answerbox--question-media, .question-media, .question-body {
   overflow: visible !important;
 }

app/views/question/show.html.haml

@@ -1,35 +1,6 @@
 - provide(:title, "#{@question.user.display_name.blank? ? "@#{@question.user.screen_name}'s" : "#{@question.user.display_name}'s"} question | #{APP_CONFIG['site_name']}")
-.panel.panel-question
+= render 'shared/question_header', question: @question, hidden: false
-  .container
+= render 'shared/question_header', question: @question, hidden: true
-    .panel-body
-      .media.question-media
-        - unless @question.author_is_anonymous
-          %a.pull-left{href: show_user_profile_path(@question.user.screen_name)}
-            %img.img-rounded.answerbox--img{src: gravatar_url(@question.user)}
-        .media-body.question-body
-          - if user_signed_in?
-            .pull-right
-              .btn-group
-                %button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
-                  %span.caret
-                %ul.dropdown-menu.dropdown-menu-right{role: :menu}
-                  - if current_user.mod? or @question.user == current_user
-                    %li.text-danger
-                      %a{href: '#', data: { action: 'ab-question-destroy', q_id: @question.id, redirect: if @question.author_is_anonymous? then "/" else show_user_questions_path(@question.user.screen_name) end }}
-                        %i.fa.fa-trash-o
-                        Delete Question
-                  - unless @question.user == current_user
-                    %li
-                      %a{href: '#', data: { action: 'ab-question-report', q_id: @question.id }}
-                        %i.fa.fa-exclamation-triangle
-                        Report
-          %h6.text-muted.media-heading.answerbox--question-user
-            = user_screen_name @question.user, @question.author_is_anonymous
-            asked
-            %span{title: @question.created_at, data: { toggle: :tooltip, placement: :bottom }}
-              = time_ago_in_words(@question.created_at)
-            ago
-          %p.answerbox--question-text= @question.content
 .container.question-page
   / TODO: make this pretty (it's currently C-c'd straight from shared/_answerbox)
 

app/views/shared/_question_header.haml

@@ -0,0 +1,33 @@
+.panel.panel-question{class: if hidden then 'question-hidden' end, tabindex: if hidden then '-1' end, aria: { hidden: if hidden then :true end }}
+  .container
+    .panel-body
+      .media.question-media
+        - unless question.author_is_anonymous
+          %a.pull-left{href: unless hidden then show_user_profile_path(question.user.screen_name) end}
+            %img.img-rounded.answerbox--img{src: gravatar_url(question.user)}
+        .media-body.question-body
+          - if user_signed_in?
+            .pull-right
+              .btn-group
+                %button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
+                  %span.caret
+                - unless hidden
+                  %ul.dropdown-menu.dropdown-menu-right{role: :menu}
+                    - if current_user.mod? or question.user == current_user
+                      %li.text-danger
+                        %a{href: '#', data: { action: 'ab-question-destroy', q_id: question.id, redirect: if question.author_is_anonymous? then "/" else show_user_questions_path(question.user.screen_name) end }}
+                          %i.fa.fa-trash-o
+                          Delete Question
+                    - unless question.user == current_user
+                      %li
+                        %a{href: '#', data: { action: 'ab-question-report', q_id: question.id }}
+                          %i.fa.fa-exclamation-triangle
+                          Report
+          %h6.text-muted.media-heading.answerbox--question-user
+            = user_screen_name question.user, question.author_is_anonymous, !hidden
+            - unless hidden
+              asked
+              %span{title: question.created_at, data: { toggle: :tooltip, placement: :bottom }}
+                = time_ago_in_words(question.created_at)
+              ago
+          %p.answerbox--question-text= question.content