Merge pull request #10158 from nextcloud/fix/search-button-focus

fix: open search buttons on focus and fix the wraping

src/components/SearchMessages.vue

@@ -10,7 +10,8 @@
 				class="search-messages--input"
 				:placeholder="t('mail', 'Search in mailbox')"
 				:aria-label="t('mail', 'Search in mailbox')"
-				@click="toggleButtons">
+				@focus="showButtons = true"
+				@blur="hideButtonsWithDelay">
 			<NcButton type="tertiary" class="search-messages--filter" @click="moreSearchActions = true">
 				<template #icon>
 					<FilterVariantIcon :size="20" />
@@ -267,6 +268,7 @@
 			<NcButton type="secondary"
 				class="shortcut"
 				:aria-label="t('mail', 'Has attachment')"
+				:title="t('mail', 'Has attachment')"
 				:pressed="hasAttachmentActive"
 				@update:pressed="hasAttachmentActive = !hasAttachmentActive"
 				@click="toggleGetAttachments">
@@ -276,6 +278,7 @@
 				class="shortcut"
 				:pressed="hasLast7daysActive"
 				:aria-label="t('mail', 'Last 7 days')"
+				:title="t('mail', 'Last 7 days')"
 				@update:pressed="hasLast7daysActive = !hasLast7daysActive"
 				@click="toggleLastWeekFilter">
 				{{ t('mail', 'Last 7 days') }}
@@ -284,6 +287,7 @@
 				class="shortcut"
 				:pressed="hasFromMeActive"
 				:aria-label="t('mail', 'From me')"
+				:title="t('mail', 'From me')"
 				@update:pressed="hasFromMeActive = !hasFromMeActive"
 				@click="toggleCurrentUser">
 				{{ t('mail', 'From me') }}
@@ -455,8 +459,10 @@ export default {
 		},
 	},
 	methods: {
-		toggleButtons() {
-			this.showButtons = !this.showButtons
+		hideButtonsWithDelay() {
+			setTimeout(() => {
+				this.showButtons = false
+			}, 100)
 		},
 		toggleGetAttachments() {
 			if (this.hasAttachmentActive) {
@@ -790,7 +796,10 @@ export default {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
 	gap: 4px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: 0 5px 5px 5px;
 }
 </style>