only show delete when only one range selected

2 files changed, 22 insertions, 14 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 773fcf72..dbebd534 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -218,6 +218,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 ? "Editing such a large range may be slow"
                 : undefined
             }
+            onlyShowDelete={highlightedCodeSections.length <= 1}
             editing={section.editing}
             pinned={section.pinned}
             index={idx}
@@ -334,6 +335,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
           })}
           showAbove={showAbove()}
           ulHeightPixels={ulRef.current?.getBoundingClientRect().height || 0}
+          hidden={!downshiftProps.isOpen || items.length === 0}
         >
           {downshiftProps.isOpen &&
             items.map((item, index) => (
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index d9d779d1..5a16516e 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -27,7 +27,6 @@ const GridDiv = styled.div`
   height: 100%;
   display: grid;
   grid-gap: 0;
-  grid-template-columns: 1fr 1fr;
   align-items: center;
   border-radius: ${defaultBorderRadius};
 
@@ -69,6 +68,7 @@ interface PillButtonProps {
   editing: boolean;
   pinned: boolean;
   warning?: string;
+  onlyShowDelete?: boolean;
 }
 
 const PillButton = (props: PillButtonProps) => {
@@ -105,19 +105,25 @@ const PillButton = (props: PillButtonProps) => {
           }}
         >
           {isHovered && (
-            <GridDiv>
-              <ButtonDiv
-                data-tooltip-id={`edit-${props.index}`}
-                backgroundColor={"#8800aa55"}
-                onClick={() => {
-                  client?.setEditingAtIndices([props.index]);
-                }}
-              >
-                <PaintBrush
-                  style={{ margin: "auto" }}
-                  width="1.6em"
-                ></PaintBrush>
-              </ButtonDiv>
+            <GridDiv
+              style={{
+                gridTemplateColumns: props.onlyShowDelete ? "1fr" : "1fr 1fr",
+              }}
+            >
+              {props.onlyShowDelete || (
+                <ButtonDiv
+                  data-tooltip-id={`edit-${props.index}`}
+                  backgroundColor={"#8800aa55"}
+                  onClick={() => {
+                    client?.setEditingAtIndices([props.index]);
+                  }}
+                >
+                  <PaintBrush
+                    style={{ margin: "auto" }}
+                    width="1.6em"
+                  ></PaintBrush>
+                </ButtonDiv>
+              )}
 
               {/* <ButtonDiv
             data-tooltip-id={`pin-${props.index}`}