From 03db1efd2f6de74deadaed2371e5e354ee18351a Mon Sep 17 00:00:00 2001
From: Jonatan Heyman <jonatan@heyman.info>
Date: Wed, 24 Jul 2024 14:30:14 +0200
Subject: [PATCH] Place scrollbar for Language selector and Note selector
 within the list instead of scrolling the whole "screen"

---
 src/components/LanguageSelector.vue | 17 +++++++++++------
 src/components/NewNote.vue          |  5 ++---
 src/components/NoteSelector.vue     | 17 +++++++++++------
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/LanguageSelector.vue b/src/components/LanguageSelector.vue
index ac91760a..d0ca3d10 100644
--- a/src/components/LanguageSelector.vue
+++ b/src/components/LanguageSelector.vue
@@ -106,12 +106,12 @@
 
 <style scoped lang="sass">    
     .scroller
-        overflow: auto
-        position: fixed
-        top: 0
-        left: 0
-        bottom: 0
-        right: 0
+        //overflow: auto
+        //position: fixed
+        //top: 0
+        //left: 0
+        //bottom: 0
+        //right: 0
     .language-selector
         font-size: 13px
         padding: 10px
@@ -121,6 +121,10 @@
         top: 0
         left: 50%
         transform: translateX(-50%)
+        max-height: 100%
+        box-sizing: border-box
+        display: flex
+        flex-direction: column
         border-radius: 0 0 5px 5px
         box-shadow: 0 0 10px rgba(0,0,0,0.3)
         +dark-mode
@@ -152,6 +156,7 @@
                 max-width: 100%
         
         .items
+            overflow-y: auto
             > li
                 border-radius: 3px
                 padding: 5px 12px
diff --git a/src/components/NewNote.vue b/src/components/NewNote.vue
index b6e3bd3e..e95a9aab 100644
--- a/src/components/NewNote.vue
+++ b/src/components/NewNote.vue
@@ -50,7 +50,7 @@
 </script>
 
 <template>
-    <div class="scroller" @keydown="onKeydown" tabindex="-1">
+    <div class="fader" @keydown="onKeydown" tabindex="-1">
         <form class="new-note" tabindex="-1" @focusout="onFocusOut" ref="container" @submit="onSubmit">
             <div class="container">
                 <h1>New Note from Block</h1>
@@ -73,8 +73,7 @@
 </template>
 
 <style scoped lang="sass">    
-    .scroller
-        overflow: auto
+    .fader
         position: fixed
         top: 0
         left: 0
diff --git a/src/components/NoteSelector.vue b/src/components/NoteSelector.vue
index 126b14b7..c1a81a48 100644
--- a/src/components/NoteSelector.vue
+++ b/src/components/NoteSelector.vue
@@ -114,12 +114,12 @@
 
 <style scoped lang="sass">    
     .scroller
-        overflow: auto
-        position: fixed
-        top: 0
-        left: 0
-        bottom: 0
-        right: 0
+        //overflow: auto
+        //position: fixed
+        //top: 0
+        //left: 0
+        //bottom: 0
+        //right: 0
     .note-selector
         font-size: 13px
         padding: 10px
@@ -129,6 +129,10 @@
         top: 0
         left: 50%
         transform: translateX(-50%)
+        max-height: 100%
+        box-sizing: border-box
+        display: flex
+        flex-direction: column
         border-radius: 0 0 5px 5px
         box-shadow: 0 0 10px rgba(0,0,0,0.3)
         +dark-mode
@@ -160,6 +164,7 @@
                 max-width: 100%
         
         .items
+            overflow-y: auto
             > li
                 border-radius: 3px
                 padding: 5px 12px