Address PR comments (fix option dropdown)

public/stylesheets/styles.css

@@ -2743,25 +2743,39 @@ br {
 
 .l-select-notation,
 .l-select-theme {
-  display: flex;
-  overflow-y: auto;
-  flex-direction: column;
-  max-height: 25rem;
-  z-index: 2;
-  align-items: stretch;
-  scrollbar-width: thin;
+  overflow: hidden;
   background-color: var(--color-base);
-  border-right: 0.1rem solid var(--color-good);
-  border-bottom: 0.1rem solid var(--color-good);
-  border-left: 0.1rem solid var(--color-good);
+  border: 0.1rem var(--color-good);
+  border-style: none solid solid;
   border-radius: var(--var-border-radius, 0.4rem);
 }
 
-.l-select-notation::-webkit-scrollbar,
-.l-select-theme::-webkit-scrollbar {
+.l-select-notation__inner,
+.l-select-theme__inner {
+  display: flex;
+  /*
+    Overflow-y is duplicated here. Auto works on most browsers-- overlay doesn't.
+    Overlay makes the scrollbar display on top of the element, which is what we want. Auto is there in case
+    overlay isn't available. The order must stay the same.
+  */
+  overflow-y: auto;
+  overflow-y: overlay;
+  flex-direction: column;
+  max-height: 24.9rem;
+  align-items: stretch;
+  scrollbar-width: thin;
+}
+
+.l-select-notation__inner::-webkit-scrollbar,
+.l-select-theme__inner::-webkit-scrollbar {
   width: 0.8rem;
 }
 
+.l-select-notation__item:last-child,
+.l-select-theme__item:last-child {
+  border: 0;
+}
+
 .l-select-notation__item,
 .l-select-theme__item {
   display: flex;
@@ -2771,10 +2785,7 @@ br {
 
 .o-primary-btn.c-select-notation__item,
 .o-primary-btn.c-select-theme__item {
-  z-index: 1;
-  border-top: none;
-  border-right: none;
-  border-left: none;
+  border-style: none none solid;
   border-radius: 0;
   box-shadow: none;
 }

src/components/tabs/options-visual/SelectNotationDropdown.vue

@@ -9,16 +9,15 @@ export default {
 
 <template>
   <div class="l-select-notation">
-    <div
-      v-for="notation in notations"
-      :key="notation.name"
-      :style="{
-        'border-bottom-width': notation === notations.last() ? '0' : ''
-      }"
-      class="o-primary-btn l-select-notation__item c-select-notation__item"
-      @click="notation.setAsCurrent()"
-    >
-      {{ notation.name }}
+    <div class="l-select-notation__inner">
+      <div
+        v-for="notation in notations"
+        :key="notation.name"
+        class="o-primary-btn l-select-notation__item c-select-notation__item"
+        @click="notation.setAsCurrent()"
+      >
+        {{ notation.name }}
+      </div>
     </div>
   </div>
 </template>

src/components/tabs/options-visual/SelectThemeDropdown.vue

@@ -21,16 +21,15 @@ export default {
 
 <template>
   <div class="l-select-theme">
-    <div
-      v-for="theme in themes"
-      :key="theme.name"
-      :style="{
-        'border-bottom-width': theme.name === availableThemeNames.last() ? '0' : ''
-      }"
-      class="o-primary-btn l-select-theme__item c-select-theme__item"
-      @click="theme.set()"
-    >
-      {{ theme.displayName() }}
+    <div class="l-select-theme__inner">
+      <div
+        v-for="theme in themes"
+        :key="theme.name"
+        class="o-primary-btn l-select-theme__item c-select-theme__item"
+        @click="theme.set()"
+      >
+        {{ theme.displayName() }}
+      </div>
     </div>
   </div>
 </template>