fix: use ellipsis for tags text in dropdown

standardnotes · Jun 1, 2021 · af3bed8 · af3bed8
1 parent 19a85a1
commit af3bed8
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -135,22 +135,28 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
                     onBlur={closeOnBlur}
                     tabIndex={tabIndex}
                   >
-                    <Icon type="hashtag" className="color-neutral mr-2" />
-                    {tag.title
-                      .split(new RegExp(`(${searchQuery})`, 'gi'))
-                      .map((substring, index) => (
-                        <span
-                          key={index}
-                          className={
-                            substring.toLowerCase() ===
-                            searchQuery.toLowerCase()
-                              ? 'font-bold whitespace-pre-wrap'
-                              : 'whitespace-pre-wrap'
-                          }
-                        >
-                          {substring}
-                        </span>
-                      ))}
+                    <Icon type="hashtag" className="color-neutral mr-2 min-h-5 min-w-5" />
+                    <span className="whitespace-nowrap overflow-hidden overflow-ellipsis">
+                      {searchQuery === '' ? (
+                        tag.title
+                      ) : (
+                        tag.title
+                          .split(new RegExp(`(${searchQuery})`, 'gi'))
+                          .map((substring, index) => (
+                            <span
+                              key={index}
+                              className={`${
+                                substring.toLowerCase() ===
+                                searchQuery.toLowerCase()
+                                  ? 'font-bold whitespace-pre-wrap'
+                                  : 'whitespace-pre-wrap '
+                              }`}
+                            >
+                              {substring}
+                            </span>
+                          ))
+                      )}
+                    </span>
                   </button>
                 );
               })}

diff --git a/app/assets/javascripts/components/NoteTags.tsx b/app/assets/javascripts/components/NoteTags.tsx
@@ -156,7 +156,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
       <div
         ref={tagsContainerRef}
         className={`absolute bg-default h-9 flex flex-wrap pl-1 -ml-1 ${
-          tagsContainerExpanded ? '' : 'overflow-y-hidden'
+          tagsContainerExpanded ? '' : 'overflow-hidden'
         }`}
         style={{
           maxWidth: tagsContainerMaxWidth,
@@ -188,7 +188,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
                 type="hashtag"
                 className="sn-icon--small color-neutral mr-1"
               />
-              <span className="whitespace-nowrap overflow-y-hidden overflow-ellipsis">
+              <span className="whitespace-nowrap overflow-hidden overflow-ellipsis">
                 {tag.title}
               </span>
             </button>

diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
@@ -168,6 +168,10 @@
   max-width: 20rem;
 }
 
+.min-w-5 {
+  min-width: 1.25rem;
+}
+
 .h-1px {
   height: 1px;
 }
@@ -208,6 +212,10 @@
   max-height: 30rem;
 }
 
+.min-h-5 {
+  min-height: 1.25rem;
+}
+
 .fixed {
   position: fixed;
 }
@@ -220,8 +228,8 @@
   overflow: auto;
 }
 
-.overflow-y-hidden {
-  overflow-y: hidden;
+.overflow-hidden {
+  overflow: hidden;
 }
 
 .overflow-ellipsis {