Skip to content

Fix Suspend button width on Source details pages with short status message#4030

Merged
opudrovs merged 1 commit intomainfrom
4001-fix-suspend-button-width
Sep 21, 2023
Merged

Fix Suspend button width on Source details pages with short status message#4030
opudrovs merged 1 commit intomainfrom
4001-fix-suspend-button-width

Conversation

@opudrovs
Copy link
Copy Markdown
Contributor

@opudrovs opudrovs commented Sep 19, 2023

Closes #4001

  • Added min-width: fit-content to the SyncActions component to prevent Suspend button being to narrow on Source details pages in the status message is too short.

Notes:

  • The padding on the Suspend button stays the same, but the button's with is forced to be too narrow because of the width: 50% specified in the SyncActions component. As discussed with @joshri, this width setting was added to make the buttons play nicely with Applied Revision and Last Updated elements on Application details pages.

Testing:

At least on my laptop's screen:
Screenshot 2023-09-20 at 11 40 49

To reproduce the original issue in the main branch, just go to a Source details page and change the object status message to smth. short (HelmChart have shorter message than other sources thats why this issue was visible on HelmChart pages):

Screenshot 2023-09-20 at 11 30 49

In the current branch with the fix, the Suspend button should look as expected:

Screenshot 2023-09-20 at 11 20 15

You can also check that the fix does not change the layout of Application details page (the issue with Suspend button was not happening on the Application details pages, but I would not like to introduce any changes to the elements' layout with the fix) and Applied Revision and Last Updated elements look like before on wide and narrow screens:

Screenshot 2023-09-20 at 11 21 11 Screenshot 2023-09-20 at 11 21 24

@opudrovs opudrovs added bug Something isn't working area/ui Issues that require front-end work labels Sep 19, 2023
@opudrovs opudrovs self-assigned this Sep 19, 2023
@opudrovs opudrovs force-pushed the 4001-fix-suspend-button-width branch from a764297 to ef41251 Compare September 19, 2023 21:13
@opudrovs opudrovs changed the title Fix suspend button width Fix Suspend button width Sep 19, 2023
@opudrovs opudrovs changed the title Fix Suspend button width Fix Suspend button width on Source details pages with short status message Sep 19, 2023
@opudrovs opudrovs marked this pull request as ready for review September 20, 2023 09:44
Copy link
Copy Markdown
Contributor

@joshri joshri left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!! LGTM

@opudrovs opudrovs force-pushed the 4001-fix-suspend-button-width branch from ef41251 to 767f319 Compare September 21, 2023 08:47
@opudrovs opudrovs merged commit 2b3bb02 into main Sep 21, 2023
@opudrovs opudrovs deleted the 4001-fix-suspend-button-width branch September 21, 2023 08:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/ui Issues that require front-end work bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

No padding on Suspend button in Source Detail

2 participants