upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-05-28 04:32:30 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 25

fix(core): Hide current-app label at narrower viewports

Browse source 
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
This commit is contained in:
Peter Ringelmann 2026-05-26 17:28:31 +02:00
parent 496662e9a5
commit 57df565cb9
1 changed files with 19 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
core/src/components/AppMenu.vue
View file

@ -426,7 +426,8 @@ export default defineComponent({
box-shadow: inset 0 0 0 2px var(--color-background-plain-text) !important;
}
// Inner text slot needs min-width: 0 so the label can ellipsize.
// Lets the inner label shrink to its max-width and ellipsize instead of
// pushing the button wider than the inline-flex text slot.
:deep(.button-vue__text) {
min-width: 0;
}
@ -451,18 +452,23 @@ export default defineComponent({
}
&__current-app-name {
// inline-block: inline elements ignore max-width + overflow.
display: inline-block;
vertical-align: middle;
font-size: var(--default-font-size);
font-weight: 500;
white-space: nowrap;
letter-spacing: -0.5px;
overflow: hidden;
text-overflow: ellipsis;
// Cap width so long titles ellipsize instead of pushing the header
// icons off-screen (.header-start doesn't shrink).
max-width: clamp(80px, 22vw, 320px);
// Hidden by default so the icon-only trigger fits alongside the
// centered search input. The button's aria-label still announces the
// section name. At wide viewports we restore the label with a
// truncation cap as a safety net for long localized names.
display: none;
@media only screen and (min-width: 1400px) {
display: inline-block;
vertical-align: middle;
font-size: var(--default-font-size);
font-weight: 500;
white-space: nowrap;
letter-spacing: -0.5px;
overflow: hidden;
text-overflow: ellipsis;
max-width: clamp(160px, 18vw, 360px);
}
}
&__popover {