From 323bc34ed63fc5ea460bb6ecbf7e4fb1e27c836c Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Wed, 5 May 2021 14:42:33 -0300
Subject: [PATCH] styles: fix menu spacing and make tag list scrollable

---
 .../javascripts/components/NotesOptions.tsx     |  8 ++++----
 .../components/NotesOptionsPanel.tsx            |  2 +-
 app/assets/stylesheets/_sn.scss                 | 17 +++++++++++++----
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
index 3076df14b..67c5eb17d 100644
--- a/app/assets/javascripts/components/NotesOptions.tsx
+++ b/app/assets/javascripts/components/NotesOptions.tsx
@@ -36,14 +36,14 @@ export const NotesOptions = observer(
     const iconClass = 'fill-current color-neutral mr-2';
     const buttonClass =
       'flex items-center border-0 focus:inner-ring-info ' +
-      'cursor-pointer hover:bg-contrast color-text bg-transparent h-10 px-3 ' +
+      'cursor-pointer hover:bg-contrast color-text bg-transparent px-3 py-1.5 ' +
       'text-left';
 
     return (
       <>
         <Switch
           onBlur={closeOnBlur}
-          className="h-10"
+          className="px-3 py-1.5"
           checked={locked}
           onChange={() => {
             appState.notes.setLockSelectedNotes(!locked);
@@ -56,7 +56,7 @@ export const NotesOptions = observer(
         </Switch>
         <Switch
           onBlur={closeOnBlur}
-          className="h-10"
+          className="px-3 py-1.5"
           checked={!hidePreviews}
           onChange={() => {
             appState.notes.setHideSelectedNotePreviews(!hidePreviews);
@@ -112,7 +112,7 @@ export const NotesOptions = observer(
             style={{
               ...tagsMenuPosition,
             }}
-            className="sn-dropdown sn-dropdown-anchor-right flex flex-col py-2 max-w-265px"
+            className="sn-dropdown sn-dropdown-anchor-right flex flex-col py-2 max-w-265px max-h-80 overflow-y-scroll"
           >
             {appState.tags.tags.map((tag) => (
               <button
diff --git a/app/assets/javascripts/components/NotesOptionsPanel.tsx b/app/assets/javascripts/components/NotesOptionsPanel.tsx
index deeb5e5d8..c5476b98e 100644
--- a/app/assets/javascripts/components/NotesOptionsPanel.tsx
+++ b/app/assets/javascripts/components/NotesOptionsPanel.tsx
@@ -65,7 +65,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
         style={{
           ...position,
         }}
-        className="sn-dropdown sn-dropdown-anchor-right flex flex-col py-2 max-w-265px"
+        className="sn-dropdown sn-dropdown-anchor-right flex flex-col py-2 max-w-265"
       >
         <NotesOptions
           appState={appState}
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 93d894597..3b7a77c5c 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -45,6 +45,11 @@
   margin-bottom: 0.5rem;
 }
 
+.py-1\.5  {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
 .outline-none {
   outline: none;
 }
@@ -94,10 +99,6 @@
   max-width: 265px;
 }
 
-.h-32px {
-  height: 32px;
-}
-
 .h-1px {
   height: 1px;
 }
@@ -106,6 +107,14 @@
   height: 2.5rem;
 }
 
+.max-h-80 {
+  max-height: 20rem;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 /**
  * A button that is just an icon. Separated from .sn-button because there
  * is almost no style overlap.