hoverable area on collapsed sidebar icons

app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue

@@ -73,13 +73,14 @@ export default {
 
 <template>
   <div>
-    <div class="sidebar-collapsed-icon" @click="onClickCollapsedIcon">
     <span
       v-tooltip
+      class="sidebar-collapsed-icon"
       :title="notificationTooltip"
       data-container="body"
       data-placement="left"
       data-boundary="viewport"
+      @click="onClickCollapsedIcon"
     >
       <icon
         :name="notificationIcon"
@@ -88,7 +89,6 @@ export default {
         class="sidebar-item-icon is-active"
       />
     </span>
-    </div>
     <span class="issuable-header-text hide-collapsed float-left"> {{ __('Notifications') }} </span>
     <toggle-button
       ref="toggleButton"

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;

changelogs/unreleased/61207-adjusted-hoverable-area-in-sidebar.yml

+---
+title: "Adjusted the clickable area of collapsed sidebar elements"
+merge_request: 30974
+author: Michel Engelen
+type: changed