From 860e30de202309e2a818e13e6f4c69a2693f9f87 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Thu, 10 Jun 2021 11:18:29 -0300
Subject: [PATCH] styles: change overflow to auto and add back dropdowns min
 width

---
 app/assets/javascripts/components/AutocompleteTagInput.tsx | 2 +-
 app/assets/javascripts/components/NotesContextMenu.tsx     | 2 +-
 app/assets/javascripts/components/NotesOptions.tsx         | 2 +-
 app/assets/javascripts/components/NotesOptionsPanel.tsx    | 2 +-
 app/assets/javascripts/components/SessionsModal.tsx        | 2 +-
 app/assets/stylesheets/_sn.scss                            | 6 +++---
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
index 6be62ad80..6567a9cf0 100644
--- a/app/assets/javascripts/components/AutocompleteTagInput.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -117,7 +117,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
             style={{ maxHeight: dropdownMaxHeight, maxWidth: tagsContainerMaxWidth }}
             onBlur={closeOnBlur}
           >
-            <div className="overflow-y-scroll">
+            <div className="overflow-y-auto">
               {autocompleteTagResults.map((tagResult) => (
                 <AutocompleteTagResult
                   key={tagResult.uuid}
diff --git a/app/assets/javascripts/components/NotesContextMenu.tsx b/app/assets/javascripts/components/NotesContextMenu.tsx
index fa21ac7eb..ec6b4be01 100644
--- a/app/assets/javascripts/components/NotesContextMenu.tsx
+++ b/app/assets/javascripts/components/NotesContextMenu.tsx
@@ -23,7 +23,7 @@ const NotesContextMenu = observer(({ appState }: Props) => {
   return appState.notes.contextMenuOpen ? (
     <div
       ref={contextMenuRef}
-      className="sn-dropdown max-h-120 max-w-xs flex flex-col py-2 overflow-y-scroll fixed"
+      className="sn-dropdown max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
       style={{
         ...appState.notes.contextMenuPosition,
         maxHeight: appState.notes.contextMenuMaxHeight,
diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
index 04c9f56b0..151385444 100644
--- a/app/assets/javascripts/components/NotesOptions.tsx
+++ b/app/assets/javascripts/components/NotesOptions.tsx
@@ -159,7 +159,7 @@ export const NotesOptions = observer(
                 maxHeight: tagsMenuMaxHeight,
                 position: 'fixed',
               }}
-              className="sn-dropdown flex flex-col py-2 max-h-120 max-w-xs fixed overflow-y-scroll"
+              className="sn-dropdown flex flex-col py-2 max-h-120 max-w-xs fixed overflow-y-auto"
             >
               {appState.tags.tags.map((tag) => (
                 <button
diff --git a/app/assets/javascripts/components/NotesOptionsPanel.tsx b/app/assets/javascripts/components/NotesOptionsPanel.tsx
index 2f1f7485b..9a6c311a4 100644
--- a/app/assets/javascripts/components/NotesOptionsPanel.tsx
+++ b/app/assets/javascripts/components/NotesOptionsPanel.tsx
@@ -71,7 +71,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
           ...position,
           maxHeight,
         }}
-        className="sn-dropdown sn-dropdown--animated max-h-120 max-w-xs flex flex-col py-2 overflow-y-scroll fixed"
+        className="sn-dropdown sn-dropdown--animated max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
       >
         {open && (
           <NotesOptions
diff --git a/app/assets/javascripts/components/SessionsModal.tsx b/app/assets/javascripts/components/SessionsModal.tsx
index 8e5c9298b..90b782ba6 100644
--- a/app/assets/javascripts/components/SessionsModal.tsx
+++ b/app/assets/javascripts/components/SessionsModal.tsx
@@ -145,7 +145,7 @@ const SessionsModal: FunctionComponent<{
                   </button>
                 </div>
               </div>
-              <div class="sk-panel-content overflow-y-scroll">
+              <div class="sk-panel-content overflow-y-auto">
                 {refreshing ? (
                   <>
                     <div class="sk-spinner small info"></div>
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index b18d61dc8..2736ab43d 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -275,8 +275,8 @@
   position: fixed;
 }
 
-.overflow-y-scroll {
-  overflow-y: scroll;
+.overflow-y-auto {
+  overflow-y: auto;
 }
 
 .overflow-auto {
@@ -360,7 +360,7 @@
 
 .sn-dropdown {
   @extend .bg-default;
-  // @extend .min-w-80;
+  @extend .min-w-80;
   @extend .rounded;
   @extend .box-shadow;