fix(pci.projects.sidebar): improve clipboard display (#803)

Prevent icon from moving to the right on hover and prevent tooltip from being cut off

ref: MSB-91

Author: marie-j

packages/manager/apps/public-cloud/src/assets/theme/_sidebar.less

@@ -37,6 +37,15 @@ cloud-sidebar { /* stylelint-disable-line */
       padding: 0;
       min-width: auto;
       color: @primary-color;
+
+      &:hover {
+        min-width: auto;
+      }
+    }
+
+    .oui-tooltip {
+      bottom: 0;
+      margin: 0;
     }
   }
 
@@ -69,6 +78,10 @@ cloud-sidebar { /* stylelint-disable-line */
       .oui-clipboard__control,
       .oui-clipboard__button {
         color: #fff;
+
+        .oui-icon {
+          color: @light-color;
+        }
       }
     }
 

packages/manager/modules/pci/src/projects/project/sidebar/sidebar.html

@@ -5,8 +5,10 @@
             <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">
+            <div class="w-100 mr-3">
+                <div class="w-100 text-truncate">
                 <h2 class="mb-0 d-inline-block" style="font-weight: 400;" data-ng-bind="$ctrl.project.description"></h2>
+                </div>
                 <oui-clipboard model="$ctrl.project.project_id"></oui-clipboard>
             </div>
             <div class="my-auto">
@@ -64,8 +66,10 @@ <h2 class="mb-0 d-inline-block" style="font-weight: 400;" data-ng-bind="$ctrl.pr
                 <span class="sr-only" data-translate="cloud_sidebar_public_cloud_project_toggle_close"></span>
             </button>
         </div>
-        <div class="w-100 text-truncate ml-3">
+        <div class="w-100 ml-3">
+            <div class="w-100 text-truncate">
             <h2 class="mb-0 d-inline-block text-white" style="font-weight: 400;" data-ng-bind="$ctrl.project.description"></h2>
+            </div>
             <oui-clipboard model="$ctrl.project.project_id"></oui-clipboard>
         </div>
     </div>