Place scrollbar for Language selector and Note selector within the li…

…st instead of scrolling the whole "screen"
heyman · Jul 24, 2024 · 03db1ef · 03db1ef
1 parent f11f360
commit 03db1ef
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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