fix styles for wrapping long tag names, add some padding

Automattic · Oct 18, 2019 · 71c2dc2 · 71c2dc2
1 parent b0d89d6
commit 71c2dc2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/lib/search-suggestions/index.jsx b/lib/search-suggestions/index.jsx
@@ -23,7 +23,7 @@ export class SearchSuggestions extends Component {
       <div className="search-suggestions">
         <div className="search-suggestion-row" onClick={() => onSearch(query)}>
           <SmallSearchIcon />
-          {query}
+          <div className="search-suggestion">{query}</div>
         </div>
         {shouldShowTagSuggestions &&
           tags
@@ -37,7 +37,9 @@ export class SearchSuggestions extends Component {
                 onClick={() => onSearch(`tag:${tag.id}`)}
               >
                 <TagIcon />
-                {decodeURIComponent(tag.id)}
+                <div className="search-suggestion">
+                  {decodeURIComponent(tag.id)}
+                </div>
               </div>
             ))}
       </div>

diff --git a/lib/search-suggestions/style.scss b/lib/search-suggestions/style.scss
@@ -4,15 +4,22 @@
   left: 0;
   z-index: 10;
   width: 100%;
+  padding: 0 5px;
   border-radius: 5px;
   border: 1px solid $studio-gray-10;
 
   .search-suggestion-row {
     cursor: pointer;
+    padding: 5px;
+    position: relative;
+  }
+  .search-suggestion {
     overflow-wrap: anywhere;
+    margin-left: 28px;
   }
 
   .icon-search-small, .icon-tag {
+    position: absolute;
     transition: $anim-transition;
     width: 24px;
   }