styles: fix menu spacing and make tag list scrollable

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

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}

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.