diff --git a/site/search/Search.scss b/site/search/Search.scss index 149d4760cb7..dc9a0ccb070 100644 --- a/site/search/Search.scss +++ b/site/search/Search.scss @@ -321,20 +321,19 @@ } .search-results__chart-hit-entities { - display: flex; - flex-wrap: wrap; - gap: 4px; list-style: none; - font-size: 0.7em; + font-size: 0.8em; li { - background-color: $blue-10; - padding: 4px 8px; - border-radius: 12px; - color: $blue-90; + display: inline; + color: $blue-50; - svg { - margin-right: 4px; + &::after { + content: ", "; + } + + &:last-child::after { + content: ""; } } } diff --git a/site/search/SearchPanel.tsx b/site/search/SearchPanel.tsx index fbe49d30375..5145e5f14d2 100644 --- a/site/search/SearchPanel.tsx +++ b/site/search/SearchPanel.tsx @@ -41,11 +41,7 @@ import { } from "./searchTypes.js" import { EXPLORERS_ROUTE_FOLDER } from "../../explorer/ExplorerConstants.js" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js" -import { - faHeartBroken, - faLocationDot, - faSearch, -} from "@fortawesome/free-solid-svg-icons" +import { faHeartBroken, faSearch } from "@fortawesome/free-solid-svg-icons" import { DEFAULT_SEARCH_PLACEHOLDER, getIndexName, @@ -118,7 +114,7 @@ function ChartHit({ hit }: { hit: IChartHit }) { [hit.slug, entities] ) const previewUrl = queryStr - ? `/grapher/thumbnail/${hit.slug}${queryStr}` + ? `/grapher/thumbnail/${hit.slug}${queryStr}` // TODO extract to .env : `${BAKED_GRAPHER_URL}/exports/${hit.slug}.svg` useEffect(() => { @@ -163,10 +159,7 @@ function ChartHit({ hit }: { hit: IChartHit }) { {entities.length > 0 && ( )}