Browse Source

fix(projectSelector): Reduce checkbox click area (#47903)

The project selector checkbox's click area overlaps with the project
settings link, causing unexpected behavior when clicking on the
overlapping area. This PR removes the overlap.

**Before ——**
<img width="358" alt="image"
src="https://user-images.githubusercontent.com/44172267/234351519-2bbd1cb5-c3eb-4d5e-9891-8e83a46eb3b4.png">


**After ——**
<img width="358" alt="image"
src="https://user-images.githubusercontent.com/44172267/234352042-0fb21680-0e79-464e-8e86-6f7f4a3a59f8.png">
Vu Luong 1 year ago
parent
commit
f5c458514f

+ 4 - 4
static/app/components/organizations/pageFilterRow.tsx

@@ -60,13 +60,13 @@ function PageFilterRow({
 const checkboxInputStyles = css`
   /* Make the hitbox of the checkbox a bit larger */
   top: -${space(2)};
-  left: -${space(2)};
-  width: 48px;
-  height: 48px;
+  left: -${space(0.5)};
+  width: 34px;
+  height: 44px;
 `;
 
 const MultiselectCheckbox = styled(Checkbox)`
-  margin: 0 ${space(1)};
+  margin: 0 ${space(0.5)};
   margin-right: ${space(0.75)};
 `;
 

+ 2 - 1
static/app/components/organizations/projectSelector/selectorItem.tsx

@@ -122,7 +122,7 @@ const BadgeWrapper = styled('div')`
 
 const ActionButton = styled(Button)`
   color: ${p => p.theme.subText};
-  padding: ${space(1)} ${space(0.25)} ${space(1)} ${space(1)};
+  padding: ${space(1)} ${space(0.5)} ${space(1)} ${space(0.5)};
   opacity: 0.33;
   :hover {
     color: ${p => p.theme.textColor};
@@ -130,6 +130,7 @@ const ActionButton = styled(Button)`
 `;
 
 const ActionBookmark = styled(BookmarkStar)`
+  margin: 0 ${space(0.25)};
   ${p => !p.project.isBookmarked && 'opacity: 0.33'};
 `;