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

fix: no selected message empty content misalignment #10587

Closed
wants to merge 1 commit into from
Closed

fix: no selected message empty content misalignment #10587

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/NoMessageSelected.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default {
}
.app-content {
display: flex;
height: 100%;
height: 100% !important;
Copy link
Member

Choose a reason for hiding this comment

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

is there a conflicting rule that set a different height?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes, the app-content-details, that breaks the message content.

https://github.com/nextcloud/mail/pull/10571/files#diff-2dc54a20fa4ab6845b4b0f252336e107d33a13f5c05d966e5c104770a1b292fdR204

Copy link
Member

Choose a reason for hiding this comment

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

Wasn't that just added with 8089ccb?

This doesn't smell like a maintainable solution if the v-deep is leaking to places it shouldn't and we have to pull the !important overwrite to push back.

Would it be possible to get rid of the deep selector?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Wasn't that just added with 8089ccb?

yes, thats what i linked on my first reply.

Its not that easy. My understanding is app-content-details shouldnt have the height:100%, but empty content should have it 100%.
I agree that we shouldnt force things, but i dont see how i can fix it differently. What i noticed now is that the style of .app-content-details is coming from contacts (!), which breaks our message content.
Screenshot from 2025-01-20 15-13-03

i have no idea why is this happening, need to investigate it better

Copy link
Member

Choose a reason for hiding this comment

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

Is Contacts missing scoped for the component styles?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

it comes from a css file: https://github.com/nextcloud/contacts/blob/main/src/css/contacts.scss#L25
I dont see any vue component on contacts not to be scoped and has this class

Copy link
Member

Choose a reason for hiding this comment

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

Can we move the css file into the app component that uses the lib component that is being styled?

justify-content: center;
&__empty {
flex-grow: unset;
Expand Down
Loading