From 796480bf509b4aa1bbadf7a0acc4b176dd394e39 Mon Sep 17 00:00:00 2001
From: Scott Feeney <scott@oceanbase.org>
Date: Wed, 31 Jan 2024 22:57:51 -0800
Subject: [PATCH 1/3] tailwindify SearchAutocompleteDropdown

---
 src/components/SearchAutocompleteDropdown.css | 21 -----
 src/components/SearchAutocompleteDropdown.jsx | 78 +++++++++----------
 2 files changed, 39 insertions(+), 60 deletions(-)
 delete mode 100644 src/components/SearchAutocompleteDropdown.css

diff --git a/src/components/SearchAutocompleteDropdown.css b/src/components/SearchAutocompleteDropdown.css
deleted file mode 100644
index 456e9a57..00000000
--- a/src/components/SearchAutocompleteDropdown.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.SearchAutocompleteDropdown {
-  flex-grow: 1;
-  pointer-events: auto;
-}
-
-.SearchAutocompleteDropdown_place {
-  font-size: 13px;
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-}
-
-.SearchAutocompleteDropdown_icon {
-  margin: 0 8px;
-  top: 2px;
-  position: relative;
-}
-
-.SearchAutocompleteDropdown_placeDescription {
-  vertical-align: middle;
-}
diff --git a/src/components/SearchAutocompleteDropdown.jsx b/src/components/SearchAutocompleteDropdown.jsx
index 63224f89..02dc5967 100644
--- a/src/components/SearchAutocompleteDropdown.jsx
+++ b/src/components/SearchAutocompleteDropdown.jsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import classnames from 'classnames';
 import { removeRecentlyUsedLocation } from '../features/geocoding';
 import {
   LocationSourceType,
@@ -15,8 +16,6 @@ import SelectionListItem from './SelectionListItem';
 
 import { ReactComponent as Position } from 'iconoir/icons/position.svg';
 
-import './SearchAutocompleteDropdown.css';
-
 const LIST_ITEM_CLASSNAME = 'SearchAutocompleteDropdown_place';
 
 let _resultMousedownTime = 0;
@@ -155,43 +154,44 @@ export default function SearchAutocompleteDropdown(props) {
   };
 
   return (
-    <SelectionList className="SearchAutocompleteDropdown">
-      {showCurrentLocationOption && (
-        <SelectionListItem
-          buttonClassName={LIST_ITEM_CLASSNAME}
-          onClick={handleCurrentLocationClick}
-          onMouseDown={handleResultMousedown}
-        >
-          <Icon className="SearchAutocompleteDropdown_icon">
-            <Position />
-          </Icon>
-          <span className="SearchAutocompleteDropdown_placeDescription">
-            {currentLocationString}
-          </span>
-        </SelectionListItem>
-      )}
-      {features.map((feature, index) => (
-        <SelectionListItem
-          buttonClassName={LIST_ITEM_CLASSNAME}
-          key={feature.properties.osm_id + ':' + feature.properties.type}
-          onClick={handleClick.bind(null, index)}
-          onMouseDown={handleResultMousedown}
-          onRemoveClick={
-            feature.fromRecentlyUsed
-              ? handleRemoveClick.bind(null, index)
-              : null
-          }
-        >
-          <PlaceIcon
-            className="SearchAutocompleteDropdown_icon"
-            place={feature}
-          />
-          <span className="SearchAutocompleteDropdown_placeDescription">
-            {describePlace(feature)}
-          </span>
-        </SelectionListItem>
-      ))}
-    </SelectionList>
+    <div className="flex flex-col m-0">
+      <SelectionList className="flex-grow pointer-events-auto">
+        {showCurrentLocationOption && (
+          <SelectionListItem
+            buttonClassName={classnames(
+              LIST_ITEM_CLASSNAME,
+              'flex flex-row items-center text-[13px]',
+            )}
+            onClick={handleCurrentLocationClick}
+            onMouseDown={handleResultMousedown}
+          >
+            <Icon className="relative top-0.5 my-0 mx-2">
+              <Position />
+            </Icon>
+            <span className="align-middle">{currentLocationString}</span>
+          </SelectionListItem>
+        )}
+        {features.map((feature, index) => (
+          <SelectionListItem
+            buttonClassName={classnames(
+              LIST_ITEM_CLASSNAME,
+              'flex flex-row items-center text-[13px]',
+            )}
+            key={feature.properties.osm_id + ':' + feature.properties.type}
+            onClick={handleClick.bind(null, index)}
+            onMouseDown={handleResultMousedown}
+            onRemoveClick={
+              feature.fromRecentlyUsed
+                ? handleRemoveClick.bind(null, index)
+                : null
+            }
+          >
+            <PlaceIcon className="relative top-0.5 my-0 mx-2" place={feature} />
+            <span className="align-middle">{describePlace(feature)}</span>
+          </SelectionListItem>
+        ))}
+      </SelectionList>
+    </div>
   );
 }
 

From d89ea953f64c2e6ea8f0944efe25efb22a5c1bf7 Mon Sep 17 00:00:00 2001
From: Scott Feeney <scott@oceanbase.org>
Date: Wed, 31 Jan 2024 23:06:22 -0800
Subject: [PATCH 2/3] factor autocomplete item

---
 src/components/SearchAutocompleteDropdown.jsx | 49 +++++++++++--------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/components/SearchAutocompleteDropdown.jsx b/src/components/SearchAutocompleteDropdown.jsx
index 02dc5967..805ff96c 100644
--- a/src/components/SearchAutocompleteDropdown.jsx
+++ b/src/components/SearchAutocompleteDropdown.jsx
@@ -157,26 +157,19 @@ export default function SearchAutocompleteDropdown(props) {
     <div className="flex flex-col m-0">
       <SelectionList className="flex-grow pointer-events-auto">
         {showCurrentLocationOption && (
-          <SelectionListItem
-            buttonClassName={classnames(
-              LIST_ITEM_CLASSNAME,
-              'flex flex-row items-center text-[13px]',
-            )}
+          <AutocompleteItem
             onClick={handleCurrentLocationClick}
             onMouseDown={handleResultMousedown}
-          >
-            <Icon className="relative top-0.5 my-0 mx-2">
-              <Position />
-            </Icon>
-            <span className="align-middle">{currentLocationString}</span>
-          </SelectionListItem>
+            icon={
+              <Icon>
+                <Position />
+              </Icon>
+            }
+            text={currentLocationString}
+          />
         )}
         {features.map((feature, index) => (
-          <SelectionListItem
-            buttonClassName={classnames(
-              LIST_ITEM_CLASSNAME,
-              'flex flex-row items-center text-[13px]',
-            )}
+          <AutocompleteItem
             key={feature.properties.osm_id + ':' + feature.properties.type}
             onClick={handleClick.bind(null, index)}
             onMouseDown={handleResultMousedown}
@@ -185,10 +178,9 @@ export default function SearchAutocompleteDropdown(props) {
                 ? handleRemoveClick.bind(null, index)
                 : null
             }
-          >
-            <PlaceIcon className="relative top-0.5 my-0 mx-2" place={feature} />
-            <span className="align-middle">{describePlace(feature)}</span>
-          </SelectionListItem>
+            icon={<PlaceIcon place={feature} />}
+            text={describePlace(feature)}
+          />
         ))}
       </SelectionList>
     </div>
@@ -206,3 +198,20 @@ export function isAutocompleteResultElement(domElement) {
 export function getLastAutocompleteResultMousedownTime() {
   return _resultMousedownTime;
 }
+
+function AutocompleteItem({ onClick, onMouseDown, onRemoveClick, icon, text }) {
+  return (
+    <SelectionListItem
+      buttonClassName={classnames(
+        LIST_ITEM_CLASSNAME,
+        'flex flex-row items-center text-[13px]',
+      )}
+      onClick={onClick}
+      onMouseDown={onMouseDown}
+      onRemoveClick={onRemoveClick}
+    >
+      {React.cloneElement(icon, { className: 'relative top-0.5 my-0 mx-2' })}
+      <span className="align-middle">{text}</span>
+    </SelectionListItem>
+  );
+}

From 4f77d100a684cbbd9266464771240c44b37feeb2 Mon Sep 17 00:00:00 2001
From: Scott Feeney <scott@oceanbase.org>
Date: Wed, 31 Jan 2024 23:14:37 -0800
Subject: [PATCH 3/3] line up icons

---
 src/components/SearchAutocompleteDropdown.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/SearchAutocompleteDropdown.jsx b/src/components/SearchAutocompleteDropdown.jsx
index 805ff96c..aaeb036e 100644
--- a/src/components/SearchAutocompleteDropdown.jsx
+++ b/src/components/SearchAutocompleteDropdown.jsx
@@ -210,7 +210,9 @@ function AutocompleteItem({ onClick, onMouseDown, onRemoveClick, icon, text }) {
       onMouseDown={onMouseDown}
       onRemoveClick={onRemoveClick}
     >
-      {React.cloneElement(icon, { className: 'relative top-0.5 my-0 mx-2' })}
+      {React.cloneElement(icon, {
+        className: 'relative top-0.5 my-0 -ml-2 md:ml-6 mr-2',
+      })}
       <span className="align-middle">{text}</span>
     </SelectionListItem>
   );