UI Table Resizing and Layout Issues -- pull request table azure devops

[rahulpalivela18]

Plugin Name

@backstage-community/plugin-azure-devops

📜 Description

The tables within the azure-repos plugin appear very congested on smaller screens, making it difficult to read the content. Additionally, in the Pull Requests section, the title "Azure Repos - Pull requests" and the status button group ("Abandoned", "Completed", "Active") are overlapping on smaller screens.

👍 Expected behavior

👎 Actual Behavior with Screenshots

👟 Reproduction steps

Go to the azure-repos plugin within Backstage. Open an entity having Pull requests Try adding EntityAzurePullRequestContent Navigate to the Pull Requests section. Reduce the size of your browser window or access the page on a smaller screen Observe how the tables appear congested and how the title and status buttons overlap (provided above)

📃 Provide the context for the Bug.

This issue significantly affects usability on smaller screens, making it challenging to navigate and use the Pull Requests section effectively. Additionally, the values of certain fields, such as IDs and other important data, are not given enough space and are collapsing even on laptop-sized screens. This makes it difficult to view and interact with critical information, reducing the overall effectiveness of the UI. The goal is to ensure the interface remains user-friendly and accessible across different screen sizes, including laptops and smaller devices.

Not only Pull Requests Even CI/CD table has similar issues

👀 Have you spent some time to check if this bug has been raised before?

• [X] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• [X] I have read the Code of Conduct

Are you willing to submit PR?

No, I don't have time to work on this right now

[awanlin]

Historical note: when this plugin was developed we didn't take screen size into account, though some of the work was done on a laptop but it may have been high-resolution which is why some of this didn't come out. I think now that Backstage can be hosted on the internet more safely being able to support tablet and mobile screen sizes as well makes sense.

Also, it uses the Table from the Backstage Core Components so the more global fix might be to make adjustments there. I would do some testing here first though.

[awanlin]

Hi @rahulpalivela18, thanks for logging this, can you share the screen sizes you used? Resolution would help as well. Just so that who ever picks this up makes sure to test with those.

[rahulpalivela18]

this is for CI-CD but it is also the same for Pull Requests Table too I guess(Here backstage demo is hidden)

size is at the top

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.