hoverable area on collapsed sidebar icons

1 files changed, 16 insertions, 4 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 6a0127eb51c..66b4f3bad2b 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -390,7 +390,7 @@
 
     .block {
       width: $gutter-collapsed-width - 2px;
-      padding: 15px 0 0;
+      padding: 0;
       border-bottom: 0;
       overflow: hidden;
 
@@ -427,10 +427,13 @@
     }
 
     .sidebar-collapsed-icon {
-      display: block;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
       width: 100%;
+      height: $sidebar-toggle-height;
       text-align: center;
-      margin-bottom: 10px;
       color: $gl-text-color-secondary;
 
       svg {
@@ -470,6 +473,16 @@
       }
 
       .btn-clipboard {
+        /*
+          This change should be temporary, because the DOM currently gets
+          generated from a ruby definition in `app/helpers/button_helper.rb`.
+          As soon as the `copy to clipboard` button will be transfered to
+          Vue this should be adjusted as well.
+        */
+        flex: 1;
+        align-self: stretch;
+        padding: 0;
+
         border: 0;
         background: transparent;
         color: $gl-text-color-secondary;
@@ -493,7 +506,6 @@
 
     .sidebar-collapsed-user {
       padding-bottom: 0;
-      margin-bottom: 10px;
 
       .author-link {
         padding-left: 0;