Fix: Add spacing between Shared label and icon in AppMenuEntry.vue #53825
Conversation
divyanshsirohi
requested review from
susnux,
artonge and
skjnldsv
and removed request for
a team
AndyScherzinger
added
design
susnux
added
2. developing
core/src/components/AppMenuEntry.vue
Outdated
| @@ -85,6 +85,7 @@ watch(() => props.app.name, calculateSize) | |||
| text-overflow: ellipsis; | |||
| overflow: hidden; | |||
| letter-spacing: -0.5px; | |||
| gap: 8px; | |||
There was a problem hiding this comment.
gap has no effect on display: block.
Thus this does nothing.
Could you elaborate what you want to achieve?
There was a problem hiding this comment.
Thanks for the feedback! My goal is simply to add around 8px of spacing between the app icon and the label to match the design expectations in the issue.
I initially used gap, but I now understand it doesn’t apply to display: block. To fix this while keeping the layout as it is, i’ll switch to using margin-right: 8px on the icon.
There was a problem hiding this comment.
What should this fix? Adding inline margin will not add any spacing instead it just misaligns the icon and the label by shifting them apart:
There was a problem hiding this comment.
Ah I guess you are working on #53797 but then this file is the wrong one.
divyanshsirohi
force-pushed
the
fix/shared-label-spacing
branch
from
7d2b9d1 to
77c21c8
Compare
There was a problem hiding this comment.
You are looking for this file: https://github.com/nextcloud/server/blob/master/apps/files_sharing/src/files_actions/sharingStatusAction.scss
|
Ah, thanks for pointing that out — I completely missed the sharingStatusAction.scss file under files_sharing/src/files_actions. I was focusing mainly on the core FilesList.vue and didn’t realize the label and icon styling were coming from there. Appreciate the heads up that clears it up! I’ll update my changes accordingly.😊 |
Summary
TODO
Checklist