Fixed the css and refactored the hbs file (#1664)

-   Ticket: [ENG-4051]

## Purpose

Fixed the CSS for cutting off a button on the mobile view on the Project Analytics Page > Linked Projects

## Summary of Changes

Updated the analytics-page/andon/application/template.hbs to be the same dom structure and css.

Updated the analytics-page/andon/application/styles.scss to have a @media screen and (max-device-height: 500px) attribute to change the max-height, padding and margin-bottom.

Author: bp-cos

lib/analytics-page/addon/application/styles.scss

@@ -1,15 +1,3 @@
-@media (min-width: 768px) {
-    .Counts {
-        display: flex;
-    }
-}
-
-@media (max-width: 767px) {
-    .CountBox:global(.panel) {
-        margin-left: 15px;
-        margin-right: 15px;
-    }
-}
 
 .Counts {
     margin-top: 20px;
@@ -64,3 +52,24 @@
     margin: 0;
     border: 0;
 }
+
+@media (min-width: 768px) {
+    .Counts {
+        display: flex;
+    }
+}
+
+@media (max-width: 768px) {
+    .CountBox:global(.panel) {
+        margin-left: 15px;
+        margin-right: 15px;
+    }
+}
+
+@media screen and (max-device-height: 500px) {
+    :global(.modal-body) {
+        max-height: 60vh;
+        padding: 0;
+        margin-bottom: 0;
+    }
+}

lib/analytics-page/addon/application/template.hbs

@@ -18,57 +18,55 @@
                 {{/if}}
             </div>
         </div>
-        <div class='col-sm-4' local-class='CountBox'>
-            <div class='panel panel-default'>
-                <div class='panel-body'>
-                    <h3>{{t 'analytics.links'}}</h3>
-                    {{#if this.loading}}
-                        {{loading-indicator dark=true}}
-                    {{else}}
-                        <h2>{{this.linkedByCount}}</h2>
-                        <button
-                            type='button'
-                            class='btn btn-link'
-                            local-class='button-link'
-                            {{on 'click' this.showLinksModal}}
-                        >
-                            {{t 'analytics.viewLinks'}}
-                        </button>
-                        {{#if this.linksModalShown}}
-                            {{#bs-modal-simple
-                                title=(t 'analytics.links')
-                                closeTitle=(t 'general.close')
-                                onHide=(action 'hideLinksModal')
-                            }}
-                                {{#if this.node}}
-                                    <ul class='list-group'>
-                                        {{#paginated-list/has-many
-                                            model=this.node
-                                            relationshipName='linkedByNodes'
-                                            query=this.linkedByQueryParams
-                                            analyticsScope='Project Analytics - Links'
-                                            as |list|
-                                        }}
-                                            <list.item as |node|>
-                                                <NodeCard
-                                                    @node={{node}}
-                                                    @readOnly={{true}}
-                                                    @analyticsScope='Project Analytics - Links'
-                                                />
-                                            </list.item>
+        <div class='col-sm-4 panel panel-default' local-class='CountBox'>
+            <div class='panel-body'>
+                <h3>{{t 'analytics.links'}}</h3>
+                {{#if this.loading}}
+                    {{loading-indicator dark=true}}
+                {{else}}
+                    <h2>{{this.linkedByCount}}</h2>
+                    <button
+                        type='button'
+                        class='btn btn-link'
+                        local-class='button-link'
+                        {{on 'click' this.showLinksModal}}
+                    >
+                        {{t 'analytics.viewLinks'}}
+                    </button>
+                    {{#if this.linksModalShown}}
+                        {{#bs-modal-simple
+                            title=(t 'analytics.links')
+                            closeTitle=(t 'general.close')
+                            onHide=(action 'hideLinksModal')
+                        }}
+                            {{#if this.node}}
+                                <ul class='list-group'>
+                                    {{#paginated-list/has-many
+                                        model=this.node
+                                        relationshipName='linkedByNodes'
+                                        query=this.linkedByQueryParams
+                                        analyticsScope='Project Analytics - Links'
+                                        as |list|
+                                    }}
+                                        <list.item as |node|>
+                                            <NodeCard
+                                                @node={{node}}
+                                                @readOnly={{true}}
+                                                @analyticsScope='Project Analytics - Links'
+                                            />
+                                        </list.item>
 
-                                            <list.empty>
-                                                {{t 'analytics.noLinks'}}
-                                            </list.empty>
-                                        {{/paginated-list/has-many}}
-                                    </ul>
-                                {{else}}
-                                    <LoadingIndicator @dark={{true}} />
-                                {{/if}}
-                            {{/bs-modal-simple}}
-                        {{/if}}
+                                        <list.empty>
+                                            {{t 'analytics.noLinks'}}
+                                        </list.empty>
+                                    {{/paginated-list/has-many}}
+                                </ul>
+                            {{else}}
+                                <LoadingIndicator @dark={{true}} />
+                            {{/if}}
+                        {{/bs-modal-simple}}
                     {{/if}}
-                </div>
+                {{/if}}
             </div>
         </div>
         <div class='col-sm-4 panel panel-default' local-class='CountBox'>