only show delete when only one range selected

1 files changed, 20 insertions, 14 deletions

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}`}