Browse Source

fix(ui): Fix layout of checkbox in 'similar issues' table item (#70274)

# Goal

The goal of this PR is to fix issue #69931, which concerns a small
layout issue in the "similar issues" table row item.

# Bug reproduction

You can reproduce the bug by:

- cloning [this fork of the `sentry`
repo](https://github.com/floels/sentry),
- checking out the [`repro-issue-69931`
branch](https://github.com/floels/sentry/tree/repro-issue-69931),
- launching the development server,
- visiting
[http://localhost:8000/organizations/sentry/issues/16/similar/?project=3](http://localhost:8000/organizations/sentry/issues/16/similar/?project=3)
(you will need to log in as admin),
- hovering over the area below the checkbox in the "similar issues"
table that appears.

You will see the background color stretching across the table row's
height:


![ezgif-5-8e59006465](https://github.com/getsentry/sentry/assets/79283128/aeb1da92-86c1-4f09-b22f-84aca3bcd76d)

# Fix

The reason the checkbox container stretches across the height of its
parent is that the parent has `display: grid;` and no `align-items`
property set. As laid out in the [MDN
docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#using_align-items),
this means the child components will stretch to fill the parent's
height.

To fix this, we set `align-items: start` on the parent component, and in
turn set `height: 100%` on the `<Diff />` sibling component, so that the
"Diff" button stays centered vertically.

# Testing the fix

You can test the fix by following the same instructions as above with
the [`repro-fix-issue-69931`
branch](https://github.com/floels/sentry/tree/repro-fix-issue-69931)
instead. This is the same branch as `repro-issue-69931`, expect with the
same changes applied as the ones in this PR (see [this comparison of the
two branches](https://github.com/floels/sentry/pull/2)).


![ezgif-5-15ec2d424c](https://github.com/getsentry/sentry/assets/79283128/ca9a0e81-4031-4526-b9ab-669dc040dc9d)

# Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated
in the State of Delaware in 2015 as Functional Software, Inc. and is
gonna need some rights from me in order to utilize my contributions in
this here PR. So here's the deal: I retain all rights, title and
interest in and to my contributions, and by keeping this boilerplate
intact I confirm that Sentry can use, modify, copy, and redistribute my
contributions, under Sentry's choice of terms.
Florian Ellis 10 months ago
parent
commit
15aac550cc

+ 2 - 0
static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/item.tsx

@@ -189,6 +189,7 @@ const Details = styled('div')`
   ${p => p.theme.overflowEllipsis};
 
   display: grid;
+  align-items: start;
   gap: ${space(1)};
   grid-template-columns: max-content auto max-content;
   margin-left: ${space(2)};
@@ -224,6 +225,7 @@ const StyledCount = styled(Count)`
 `;
 
 const Diff = styled('div')`
+  height: 100%;
   display: flex;
   align-items: center;
   margin-right: ${space(0.25)};