From f152e307370f34005dde6c12834cbcf9eada0fc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Tue, 13 Feb 2024 14:55:08 +0100
Subject: [PATCH] :bug: Fix shortcuts menu being clipped

---
 .../main/ui/workspace/sidebar/shortcuts.scss  | 351 +++++++++---------
 1 file changed, 179 insertions(+), 172 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
index acd82fd10f..530de55774 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
@@ -7,195 +7,202 @@
 @import "refactor/common-refactor.scss";
 
 .shortcuts {
-  .shortcuts-header {
-    @include flexCenter;
-    @include tabTitleTipography;
-    position: relative;
-    height: $s-32;
-    padding: $s-2 $s-2 $s-2 0;
-    margin: $s-4 $s-4 0 $s-4;
-    border-radius: $br-6;
-    background-color: var(--panel-title-background-color);
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  // TODO: Fix this once we start implementing the DS.
+  //       We should not be doign these hardcoded calc's.
+  height: calc(100vh - #{$s-60});
+}
 
-    .shortcuts-title {
-      @include flexCenter;
-      flex-grow: 1;
-      color: var(--title-foreground-color-hover);
-    }
-
-    .shortcuts-close-button {
-      @extend .button-tertiary;
-      position: absolute;
-      right: $s-2;
-      top: $s-2;
-      height: $s-28;
-      width: $s-28;
-      border-radius: $br-5;
-
-      svg {
-        @extend .button-icon;
-        stroke: var(--icon-foreground);
-      }
-    }
-  }
-
-  .search-field {
-    display: flex;
+.search-field {
+  display: flex;
+  align-items: center;
+  height: $s-32;
+  margin: $s-16 $s-12 $s-4 $s-12;
+  border-radius: $br-8;
+  font-family: "worksans", sans-serif;
+  background-color: var(--color-background-tertiary);
+  .search-box {
     align-items: center;
-    height: $s-32;
-    margin: $s-16 $s-12 $s-4 $s-12;
-    border-radius: $br-8;
-    font-family: "worksans", sans-serif;
-    background-color: var(--color-background-tertiary);
-    .search-box {
-      align-items: center;
+    display: flex;
+    width: 100%;
+
+    .icon-wrapper {
       display: flex;
-      width: 100%;
-
-      .icon-wrapper {
-        display: flex;
-        svg {
-          @extend .button-icon-small;
-          stroke: var(--icon-foreground);
-        }
-      }
-
-      .input-text {
-        @include removeInputStyle;
-        height: $s-32;
-        width: 100%;
-        margin: 0;
-        padding: $s-4;
-        border: 0;
-        font-size: $fs-12;
-        color: var(--color-foreground-primary);
-        &::placeholder {
-          color: var(--color-foreground-secondary);
-        }
-        &:focus-visible {
-          border-color: var(--color-accent-primary-muted);
-        }
-      }
-      .clear-btn {
-        @include buttonStyle;
-        @include flexCenter;
-        height: $s-16;
-        width: $s-16;
-        .clear-icon {
-          @include flexCenter;
-          svg {
-            @extend .button-icon-small;
-            stroke: var(--icon-foreground);
-          }
-        }
-      }
-    }
-    .search-icon {
-      @include flexCenter;
-      width: $s-28;
       svg {
         @extend .button-icon-small;
         stroke: var(--icon-foreground);
       }
     }
-  }
 
-  .section {
-    margin: 0;
-  }
-  .shortcuts-list {
-    display: flex;
-    flex-direction: column;
-    height: 90%;
-    padding: $s-12;
-    margin-bottom: $s-12;
-    overflow-y: overlay;
-    font-size: $fs-12;
-    color: var(--title-foreground-color);
-
-    .section-title,
-    .subsection-title {
-      @include tabTitleTipography;
-      display: flex;
-      align-items: center;
+    .input-text {
+      @include removeInputStyle;
+      height: $s-32;
+      width: 100%;
       margin: 0;
-      padding: $s-8 0;
-      cursor: pointer;
-
-      .collapsed-shortcuts {
+      padding: $s-4;
+      border: 0;
+      font-size: $fs-12;
+      color: var(--color-foreground-primary);
+      &::placeholder {
+        color: var(--color-foreground-secondary);
+      }
+      &:focus-visible {
+        border-color: var(--color-accent-primary-muted);
+      }
+    }
+    .clear-btn {
+      @include buttonStyle;
+      @include flexCenter;
+      height: $s-16;
+      width: $s-16;
+      .clear-icon {
         @include flexCenter;
         svg {
           @extend .button-icon-small;
           stroke: var(--icon-foreground);
         }
-        &.open {
-          transform: rotate(90deg);
-        }
-      }
-      .subsection-name,
-      .section-name {
-        padding-left: $s-4;
-      }
-      &:hover {
-        color: var(--title-foreground-color-hover);
-        .collapsed-shortcuts {
-          svg {
-            stroke: var(--title-foreground-color-hover);
-          }
-        }
-      }
-    }
-
-    .subsection-title {
-      text-transform: none;
-      padding-left: $s-12;
-    }
-    .subsection-menu {
-      margin-bottom: $s-4;
-    }
-    .sub-menu {
-      margin-bottom: $s-4;
-
-      .shortcuts-name {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        min-height: $s-32;
-        padding: $s-6;
-        margin-bottom: $s-4;
-        border-radius: $br-8;
-        background-color: var(--pill-background-color);
-
-        .command-name {
-          @include titleTipography;
-          margin-left: $s-2;
-          color: var(--pill-foreground-color);
-        }
-        .keys {
-          @include flexCenter;
-          gap: $s-2;
-          color: var(--pill-foreground-color);
-
-          .key {
-            @include titleTipography;
-            @include flexCenter;
-            text-transform: capitalize;
-            height: $s-20;
-            padding: $s-2 $s-6;
-            border-radius: $s-6;
-            background-color: var(--menu-shortcut-background-color);
-          }
-          .space {
-            margin: 0 $s-2;
-          }
-        }
       }
     }
   }
-  .not-found {
-    @include titleTipography;
-    color: var(--empty-message-foreground-color);
-    margin: $s-12;
+  .search-icon {
+    @include flexCenter;
+    width: $s-28;
+    svg {
+      @extend .button-icon-small;
+      stroke: var(--icon-foreground);
+    }
+  }
+}
+
+.shortcuts-header {
+  @include flexCenter;
+  @include tabTitleTipography;
+  position: relative;
+  height: $s-32;
+  padding: $s-2 $s-2 $s-2 0;
+  margin: $s-4 $s-4 0 $s-4;
+  border-radius: $br-6;
+  background-color: var(--panel-title-background-color);
+
+  .shortcuts-title {
+    @include flexCenter;
+    flex-grow: 1;
+    color: var(--title-foreground-color-hover);
+  }
+
+  .shortcuts-close-button {
+    @extend .button-tertiary;
+    position: absolute;
+    right: $s-2;
+    top: $s-2;
+    height: $s-28;
+    width: $s-28;
+    border-radius: $br-5;
+
+    svg {
+      @extend .button-icon;
+      stroke: var(--icon-foreground);
+    }
+  }
+}
+
+.section {
+  margin: 0;
+}
+
+.not-found {
+  @include titleTipography;
+  color: var(--empty-message-foreground-color);
+  margin: $s-12;
+}
+
+.shortcuts-list {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: $s-12;
+  overflow-y: scroll;
+  font-size: $fs-12;
+  color: var(--title-foreground-color);
+
+  .section-title,
+  .subsection-title {
+    @include tabTitleTipography;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: $s-8 0;
+    cursor: pointer;
+
+    .collapsed-shortcuts {
+      @include flexCenter;
+      svg {
+        @extend .button-icon-small;
+        stroke: var(--icon-foreground);
+      }
+      &.open {
+        transform: rotate(90deg);
+      }
+    }
+    .subsection-name,
+    .section-name {
+      padding-left: $s-4;
+    }
+    &:hover {
+      color: var(--title-foreground-color-hover);
+      .collapsed-shortcuts {
+        svg {
+          stroke: var(--title-foreground-color-hover);
+        }
+      }
+    }
+  }
+
+  .subsection-title {
+    text-transform: none;
+    padding-left: $s-12;
+  }
+  .subsection-menu {
+    margin-bottom: $s-4;
+  }
+  .sub-menu {
+    margin-bottom: $s-4;
+
+    .shortcuts-name {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      min-height: $s-32;
+      padding: $s-6;
+      margin-bottom: $s-4;
+      border-radius: $br-8;
+      background-color: var(--pill-background-color);
+
+      .command-name {
+        @include titleTipography;
+        margin-left: $s-2;
+        color: var(--pill-foreground-color);
+      }
+      .keys {
+        @include flexCenter;
+        gap: $s-2;
+        color: var(--pill-foreground-color);
+
+        .key {
+          @include titleTipography;
+          @include flexCenter;
+          text-transform: capitalize;
+          height: $s-20;
+          padding: $s-2 $s-6;
+          border-radius: $s-6;
+          background-color: var(--menu-shortcut-background-color);
+        }
+        .space {
+          margin: 0 $s-2;
+        }
+      }
+    }
   }
 }