fix(sidebar): user can scroll to the bottom now

Author: jleveugle

packages/manager/apps/public-cloud/src/index.html

@@ -12,7 +12,7 @@
             <div class="w-100 h-100">
                 <div class="container-fluid h-100">
                     <div class="row h-100">
-                        <div class="col-md-2 p-0 h-100 d-flex flex-column" data-ng-if="$ctrl.shouldDisplaySidebar" style="overflow: auto; box-shadow: 0 2pt 10pt rgba(40, 89, 192, 0.25); z-index: 1;">
+                        <div class="col-md-2 p-0 h-100 d-flex flex-column" data-ng-if="$ctrl.shouldDisplaySidebar">
                             <cloud-sidebar></cloud-sidebar>
                         </div>
                         <div class="h-100 position-relative" data-ng-class="{ 'col-md-10 p-0': $ctrl.shouldDisplaySidebar, 'col-md-12': !$ctrl.shouldDisplaySidebar }">

packages/manager/apps/public-cloud/src/sidebar/project-list/project-list.html

@@ -13,7 +13,7 @@
         </div>
         <div class="mt-3" data-ng-if="$ctrl.projects && $ctrl.projects.length > 0">
             <strong class="text-white">Mes projets&nbsp;:</strong>
-            <ul class="list-unstyled mt-2">
+            <ul class="list-unstyled mt-2 mb-5">
                 <li data-ng-repeat="project in $ctrl.projects track by $index">
                     <a ui-sref="pci.projects.project({ projectId: project.project_id })" class="d-flex text-white">
                         <span class="text-truncate" data-ng-bind="project.description"></span>

packages/manager/apps/public-cloud/src/sidebar/sidebar.html

@@ -1,38 +1,40 @@
-<div class="px-3 py-4 w-100">
-    <div data-ng-if="$ctrl.isLoading">
-        <oui-skeleton size="xs"></oui-skeleton>
-        <oui-skeleton class="mt-2" size="s"></oui-skeleton>
-    </div>
-    <div class="d-flex" data-ng-if="!$ctrl.isLoading && $ctrl.project">
-        <div class="w-100 text-truncate mr-3">
-            <h2 class="mb-0 d-inline-block" style="font-weight: 400;" data-ng-bind="$ctrl.project.description"></h2>
-            <button class="project-copy w-100 d-flex">
-                <span class="my-auto oui-icon oui-icon-copy-normal mr-1"></span>
-                <span class="w-100 text-truncate" data-ng-bind="$ctrl.project.project_id"></span>
-            </button>
+<div class="h-100 d-flex flex-column">
+    <div class="px-3 py-4 w-100">
+        <div data-ng-if="$ctrl.isLoading">
+            <oui-skeleton size="xs"></oui-skeleton>
+            <oui-skeleton class="mt-2" size="s"></oui-skeleton>
         </div>
-        <div class="my-auto">
-            <button type="button" class="btn btn-primary rounded-circle" style="padding: 6px 13px; background-color: rgb(40, 89, 192);" data-ng-click="$ctrl.toggleProjectsList()">
-                <span class="oui-icon oui-icon-chevron-right text-white"></span>
-            </button>
+        <div class="d-flex" data-ng-if="!$ctrl.isLoading && $ctrl.project">
+            <div class="w-100 text-truncate mr-3">
+                <h2 class="mb-0 d-inline-block" style="font-weight: 400;" data-ng-bind="$ctrl.project.description"></h2>
+                <button class="project-copy w-100 d-flex">
+                    <span class="my-auto oui-icon oui-icon-copy-normal mr-1"></span>
+                    <span class="w-100 text-truncate" data-ng-bind="$ctrl.project.project_id"></span>
+                </button>
+            </div>
+            <div class="my-auto">
+                <button type="button" class="btn btn-primary rounded-circle" style="padding: 6px 13px; background-color: rgb(40, 89, 192);" data-ng-click="$ctrl.toggleProjectsList()">
+                    <span class="oui-icon oui-icon-chevron-right text-white"></span>
+                </button>
+            </div>
         </div>
     </div>
-</div>
-<div class="h-100 position-relative">
-    <div class="position-absolute w-100"
-        data-ng-class="{
-            'hidden-xs': !$ctrl.isOpen,
-            'hidden-sm': !$ctrl.isOpen
-        }"
-        data-sidebar-menu>
-    </div>
+    <div class="h-100 position-relative mb-2" style="overflow: auto;">
+        <div class="position-absolute w-100"
+            data-ng-class="{
+                'hidden-xs': !$ctrl.isOpen,
+                'hidden-sm': !$ctrl.isOpen
+            }"
+            data-sidebar-menu>
+        </div>
 
-    <div class="oui-navbar-backdrop"
-        aria-hidden="true"
-        tabindex="-1"
-        ng-class="{ 'oui-navbar-backdrop_active': !!$ctrl.isOpen }"
-        ng-click="$ctrl.toggle()"
-        role="button"> </div>
+        <div class="oui-navbar-backdrop"
+            aria-hidden="true"
+            tabindex="-1"
+            ng-class="{ 'oui-navbar-backdrop_active': !!$ctrl.isOpen }"
+            ng-click="$ctrl.toggle()"
+            role="button"> </div>
+    </div>
 </div>
 <div data-ng-if="$ctrl.isDisplayingProjectsList" class="project-list px-3 py-4">
     <div class="d-flex mb-4">

packages/manager/apps/public-cloud/src/sidebar/sidebar.less

@@ -8,6 +8,7 @@ cloud-sidebar { /* stylelint-disable-line */
   height: 100%;
   z-index: 1;
   position: relative;
+  box-shadow: 0 2pt 10pt rgba(40, 89, 192, 0.25);
 
   .project-list {
     position: absolute;