Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(NcListItem): Ensure list item does not overflow wrapper #4956

Merged
merged 1 commit into from Dec 14, 2023
Merged

fix(NcListItem): Ensure list item does not overflow wrapper #4956

merged 1 commit into from Dec 14, 2023

Conversation

susnux
Copy link
Contributor

@susnux susnux commented Dec 13, 2023 •
edited

☑️ Resolves

width is set to 100% but if box-sizing is not set to border-box it will not include the border and the padding.
This causes the list item to overflow its parents in some cases, you can for example see this in the new unified search of Nextcloud 28 (there are even more places).

To fix this simply set box-sizing to border-box of the list item.

🖼️ Screenshots

🏚️ Before 🏡 After
Screen Shot 2023-12-13 at 15 09 51 Screenshot 2023-12-13 at 15-09-32 Dashboard - Nextcloud

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable

@susnux
fix(NcListItem): Ensure list item does not overflow wrapper due to wi…
2410c0b 
…dth 100% and padding

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux susnux added bug Something isn't working 3. to review Waiting for reviews design Design, UX, interface and interaction design feature: list-item Related to the list-item component labels Dec 13, 2023
@susnux susnux added this to the 8.3.1 milestone Dec 13, 2023
ShGKme
ShGKme approved these changes Dec 13, 2023
View reviewed changes
Copy link
Contributor

@ShGKme ShGKme left a comment

Choose a reason for hiding this comment

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

I wonder if we can just make box-sizing: border-box; a global default...

@ShGKme ShGKme mentioned this pull request Dec 14, 2023
Merged
2 tasks
@Pytal Pytal added 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews labels Dec 14, 2023
@Pytal Pytal merged commit 0209e02 into master Dec 14, 2023
15 checks passed
@Pytal Pytal deleted the fix/list-item-overflow branch December 14, 2023 20:22
@susnux susnux mentioned this pull request Dec 18, 2023
Merged
4 tasks
@ShGKme ShGKme mentioned this pull request Dec 22, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Pytal Pytal Pytal approved these changes

@ShGKme ShGKme ShGKme approved these changes

@raimund-schluessler raimund-schluessler Awaiting requested review from raimund-schluessler

@marcoambrosini marcoambrosini Awaiting requested review from marcoambrosini

Assignees
No one assigned
Labels
4. to release Ready to be released and/or waiting for tests to finish bug Something isn't working design Design, UX, interface and interaction design feature: list-item Related to the list-item component
Projects
None yet
Milestone
8.3.1
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@susnux @Pytal @ShGKme