Skip to content

Commit 01d9460

Browse files
authored
fix(preprod): Align buttons (#105224)
Wide before/after: <img width="2458" height="420" alt="CleanShot 2025-12-18 at 14 54 19@2x" src="https://github.com/user-attachments/assets/633bc41f-2fc3-4e37-b9d5-a085cefd5fd4" /> <img width="2450" height="342" alt="CleanShot 2025-12-18 at 14 53 42@2x" src="https://github.com/user-attachments/assets/d5e05c19-99e9-4eff-b998-6224d0c443ad" /> Mobile before/after: <img width="1308" height="658" alt="CleanShot 2025-12-18 at 14 54 33@2x" src="https://github.com/user-attachments/assets/d9d21e02-d723-4822-9e26-1033f1a29724" /> <img width="1278" height="708" alt="CleanShot 2025-12-18 at 14 50 41@2x" src="https://github.com/user-attachments/assets/d5c47179-9371-491d-9dbb-00576b61dc3f" />
1 parent 1ff053d commit 01d9460

File tree

1 file changed

+6
-11
lines changed

1 file changed

+6
-11
lines changed

static/app/views/preprod/buildComparison/main/sizeCompareSelectedBuilds.tsx

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@ function BuildButton({
136136
const StyledLinkButton = styled(LinkButton)`
137137
height: auto;
138138
min-height: auto;
139+
align-self: stretch;
139140
140141
/* Override ButtonLabel overflow to allow close button to extend beyond */
141142
> span:last-child {
@@ -162,15 +163,13 @@ const CloseButtonWrapper = styled('div')`
162163

163164
const ComparisonContainer = styled(Flex)`
164165
flex-wrap: wrap;
165-
align-items: stretch;
166+
align-items: center;
166167
justify-content: center;
167168
gap: ${p => p.theme.space.lg};
168169
width: 100%;
169170
170171
@media (max-width: ${p => p.theme.breakpoints.sm}) {
171172
flex-direction: column;
172-
gap: ${p => p.theme.space.md};
173-
padding-bottom: ${p => p.theme.space.lg};
174173
175174
> * {
176175
min-width: 0;
@@ -210,9 +209,7 @@ export function SizeCompareSelectedBuilds({
210209
projectType={projectType}
211210
/>
212211

213-
<Flex align="center">
214-
<Text>{t('vs')}</Text>
215-
</Flex>
212+
<Text>{t('vs')}</Text>
216213

217214
{baseBuildDetails ? (
218215
<BuildButton
@@ -224,11 +221,9 @@ export function SizeCompareSelectedBuilds({
224221
projectType={projectType}
225222
/>
226223
) : (
227-
<Flex align="center">
228-
<SelectBuild>
229-
<Text size="sm">{t('Select a build')}</Text>
230-
</SelectBuild>
231-
</Flex>
224+
<SelectBuild>
225+
<Text size="sm">{t('Select a build')}</Text>
226+
</SelectBuild>
232227
)}
233228

234229
{onTriggerComparison && (

0 commit comments

Comments
 (0)