fix(autofix): Fix deleted lines rendering and make solution editing visible (#89952)

1. Deleted lines in the overlay popup were unindented and way too big in
font size
2. Making solution editing controls visible for clarity
<img width="808" alt="Screenshot 2025-04-18 at 2 09 43 PM"
src="https://github.com/user-attachments/assets/c31d5b05-b4c0-416f-8547-ebc4d3516af4"
/>
<img width="822" alt="Screenshot 2025-04-18 at 2 20 24 PM"
src="https://github.com/user-attachments/assets/008d0e1b-ea9c-4915-954e-ebf23b3513fd"
/>

Author: roaga

static/app/components/events/autofix/autofixDiff.tsx

@@ -896,6 +896,8 @@ const RemovedLine = styled('div')`
   background-color: ${DIFF_COLORS.removedRow};
   color: ${p => p.theme.textColor};
   padding: ${space(0.25)} ${space(0.5)};
+  white-space: pre-wrap;
+  font-size: ${p => p.theme.fontSizeSmall};
 `;
 
 const StyledTextArea = styled(TextArea)`

static/app/components/events/autofix/autofixSolution.spec.tsx

@@ -301,12 +301,9 @@ describe('AutofixSolution', () => {
     const timelineItem = screen.getByTestId('autofix-solution-timeline-item-0');
     expect(timelineItem).toBeInTheDocument();
 
-    // Hover over the timeline item to reveal buttons
-    await userEvent.hover(timelineItem);
-
     // Find and click the toggle button for deselecting the item
     const toggleButton = within(timelineItem).getByRole('button', {
-      name: 'Deselect item',
+      name: 'Remove from plan',
     });
     expect(toggleButton).toBeInTheDocument();
     await userEvent.click(toggleButton);
@@ -478,11 +475,10 @@ describe('AutofixSolution', () => {
     ) as HTMLElement;
     expect(timelineItem).not.toBeNull();
 
-    // Hover over the timeline item
-    await userEvent.hover(timelineItem);
-
-    // Find the delete button - there should be only one button within the hovered item
-    const deleteButton = within(timelineItem).getByRole('button');
+    // Find the delete button using the updated aria-label
+    const deleteButton = within(timelineItem).getByRole('button', {
+      name: 'Remove from plan',
+    });
     expect(deleteButton).toBeInTheDocument();
 
     // Click the delete button

static/app/components/events/autofix/autofixSolution.tsx

@@ -11,6 +11,7 @@ import {Alert} from 'sentry/components/core/alert';
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {Input} from 'sentry/components/core/input';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import {AutofixHighlightWrapper} from 'sentry/components/events/autofix/autofixHighlightWrapper';
 import AutofixThumbsUpDownButtons from 'sentry/components/events/autofix/autofixThumbsUpDownButtons';
 import {
@@ -301,25 +302,33 @@ function SolutionEventList({
                     />
                   )}
                   <SelectionButtonWrapper>
-                    <SelectionButton
-                      onClick={e => {
-                        e.stopPropagation();
-                        if (isHumanAction) {
-                          onDeleteItem(index);
-                        } else {
-                          handleToggleActive(index);
-                        }
-                      }}
-                      aria-label={isSelected ? t('Deselect item') : t('Select item')}
+                    <Tooltip
+                      title={isSelected ? t('Remove from plan') : t('Add to plan')}
+                      disabled={isHumanAction}
                     >
-                      {isHumanAction ? (
-                        <IconDelete size="xs" color="red400" />
-                      ) : isSelected ? (
-                        <IconClose size="xs" color="red400" />
-                      ) : (
-                        <IconAdd size="xs" color="green400" />
-                      )}
-                    </SelectionButton>
+                      <SelectionButton
+                        onClick={e => {
+                          e.stopPropagation();
+                          if (isHumanAction) {
+                            onDeleteItem(index);
+                          } else {
+                            handleToggleActive(index);
+                          }
+                        }}
+                        aria-label={isSelected ? t('Remove from plan') : t('Add to plan')}
+                        actionType={
+                          isHumanAction ? 'delete' : isSelected ? 'close' : 'add'
+                        }
+                      >
+                        {isHumanAction ? (
+                          <IconDelete size="xs" />
+                        ) : isSelected ? (
+                          <IconClose size="xs" />
+                        ) : (
+                          <IconAdd size="xs" />
+                        )}
+                      </SelectionButton>
+                    </Tooltip>
                   </SelectionButtonWrapper>
                 </IconWrapper>
               </StyledTimelineHeader>
@@ -792,60 +801,51 @@ const StyledTimelineHeader = styled('div')<{isSelected: boolean; isActive?: bool
 `;
 
 const IconWrapper = styled('div')`
-  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  gap: ${space(1)};
 `;
 
 const SelectionButtonWrapper = styled('div')`
-  position: absolute;
   background: none;
   border: none;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
   height: 100%;
-  right: 0;
 `;
 
-const SelectionButton = styled('button')`
+type SelectionButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  actionType: 'delete' | 'close' | 'add';
+};
+
+const SelectionButton = styled('button')<SelectionButtonProps>`
   background: none;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: ${p => p.theme.subText};
-  opacity: 0;
   transition:
-    opacity 0.2s ease,
     color 0.2s ease,
     background-color 0.2s ease;
   border-radius: 5px;
   padding: 4px;
 
-  ${StyledTimelineHeader}:hover & {
-    opacity: 1;
-  }
-
   &:hover {
-    color: ${p => p.theme.gray500};
-    background-color: ${p => p.theme.background};
+    color: ${p =>
+      p.actionType === 'delete' || p.actionType === 'close'
+        ? p.theme.red400
+        : p.theme.green400};
   }
 `;
 
 const StyledIconChevron = styled(IconChevron)`
   color: ${p => p.theme.subText};
   flex-shrink: 0;
-  opacity: 1;
-  transition: opacity 0.2s ease;
-  margin-right: ${space(0.25)};
-
-  ${StyledTimelineHeader}:hover & {
-    opacity: 0;
-  }
 `;
 
 const InstructionsInputWrapper = styled('form')`