From ceedaade829ddb09dff29eb8304b875b003dbb90 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Thu, 10 Mar 2022 09:52:39 -0600
Subject: [PATCH] Revert "feat: wrap search option bubbles if not enough space
 (#918)"

This reverts commit be6a9fdb34f297891b98e6dbef19fc0b101009a9.
---
 app/assets/javascripts/components/Bubble.tsx        |  3 ++-
 app/assets/javascripts/components/NotesView.tsx     |  2 +-
 app/assets/javascripts/components/SearchOptions.tsx |  6 +++++-
 app/assets/stylesheets/_notes.scss                  | 12 ++++++++----
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/components/Bubble.tsx b/app/assets/javascripts/components/Bubble.tsx
index 5e6a157dc..e164a4f50 100644
--- a/app/assets/javascripts/components/Bubble.tsx
+++ b/app/assets/javascripts/components/Bubble.tsx
@@ -12,7 +12,8 @@ const styles = {
 
 const Bubble = ({ label, selected, onSelect }: BubbleProperties) => (
   <span
-    className={`${styles.base} ${
+    role="tab"
+    className={`bubble ${styles.base} ${
       selected ? styles.selected : styles.unselected
     }`}
     onClick={onSelect}
diff --git a/app/assets/javascripts/components/NotesView.tsx b/app/assets/javascripts/components/NotesView.tsx
index cd869a693..6c6a19f23 100644
--- a/app/assets/javascripts/components/NotesView.tsx
+++ b/app/assets/javascripts/components/NotesView.tsx
@@ -182,7 +182,7 @@ export const NotesView: FunctionComponent<Props> = observer(
                 </button>
               </div>
               <div className="filter-section" role="search">
-                <div className="relative">
+                <div>
                   <input
                     type="text"
                     id="search-bar"
diff --git a/app/assets/javascripts/components/SearchOptions.tsx b/app/assets/javascripts/components/SearchOptions.tsx
index 9d8c0b20d..c6abf6e0e 100644
--- a/app/assets/javascripts/components/SearchOptions.tsx
+++ b/app/assets/javascripts/components/SearchOptions.tsx
@@ -19,7 +19,11 @@ export const SearchOptions = observer(({ appState }: Props) => {
   }
 
   return (
-    <div className="search-options" onMouseDown={(e) => e.preventDefault()}>
+    <div
+      role="tablist"
+      className="search-options justify-center"
+      onMouseDown={(e) => e.preventDefault()}
+    >
       <Bubble
         label="Protected Contents"
         selected={includeProtectedContents}
diff --git a/app/assets/stylesheets/_notes.scss b/app/assets/stylesheets/_notes.scss
index f9c71eb1d..3e8cf1cd1 100644
--- a/app/assets/stylesheets/_notes.scss
+++ b/app/assets/stylesheets/_notes.scss
@@ -52,6 +52,7 @@
 
   .filter-section {
     clear: left;
+    max-height: 80px;
     margin-top: 10px;
     position: relative;
     display: flex;
@@ -76,11 +77,14 @@
     .search-options {
       margin-top: 10px;
 
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.5rem;
+      display: grid;
+      grid-template-columns: repeat( 3, 1fr );
+      gap: .5rem;
 
       font-size: var(--sn-stylekit-font-size-p);
+      white-space: nowrap;
+
+      overflow-x: auto;
     }
 
     #search-clear-button {
@@ -96,7 +100,7 @@
       line-height: 17px;
       text-align: center;
       position: absolute;
-      top: 50%;
+      top: 20%;
       transform: translateY(-50%);
       right: 10px;
       cursor: pointer;