Merge pull request #60757 from nextcloud/fix/59888-current-app-label-responsive

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

core/src/components/AppMenu.vue

@@ -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 {