hoverable area on collapsed sidebar icons

3 files changed, 37 insertions, 20 deletions

diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
index a75daca156c..0d1faceef11 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
@@ -73,22 +73,22 @@ export default {
 
 <template>
   <div>
-    <div class="sidebar-collapsed-icon" @click="onClickCollapsedIcon">
-      <span
-        v-tooltip
-        :title="notificationTooltip"
-        data-container="body"
-        data-placement="left"
-        data-boundary="viewport"
-      >
-        <icon
-          :name="notificationIcon"
-          :size="16"
-          aria-hidden="true"
-          class="sidebar-item-icon is-active"
-        />
-      </span>
-    </div>
+    <span
+      v-tooltip
+      class="sidebar-collapsed-icon"
+      :title="notificationTooltip"
+      data-container="body"
+      data-placement="left"
+      data-boundary="viewport"
+      @click="onClickCollapsedIcon"
+    >
+      <icon
+        :name="notificationIcon"
+        :size="16"
+        aria-hidden="true"
+        class="sidebar-item-icon is-active"
+      />
+    </span>
     <span class="issuable-header-text hide-collapsed float-left"> {{ __('Notifications') }} </span>
     <toggle-button
       ref="toggleButton"
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;
diff --git a/changelogs/unreleased/61207-adjusted-hoverable-area-in-sidebar.yml b/changelogs/unreleased/61207-adjusted-hoverable-area-in-sidebar.yml
new file mode 100644
index 00000000000..99fc817d703
--- /dev/null
+++ b/changelogs/unreleased/61207-adjusted-hoverable-area-in-sidebar.yml
@@ -0,0 +1,5 @@
+---
+title: "Adjusted the clickable area of collapsed sidebar elements"
+merge_request: 30974
+author: Michel Engelen
+type: changed