fix: prevent overlapping search content

changelog/unreleased/bugfix-prevent-overlapping-search-content.md

@@ -0,0 +1,6 @@
+Bugfix: Prevent overlapping search content
+
+We've fixed an issue where the search placeholder and value were overlapping the search scope filter on mobile devices.
+The placeholder is now hidden on mobile devices, scope filter is represented by an icon instead of text and a correct padding is applied to the search input so that the value ends before reaching the icons.
+
+https://github.com/owncloud/web/pull/13406

packages/design-system/src/components/OcFilterChip/OcFilterChip.vue

@@ -17,10 +17,12 @@
         size="small"
         color="var(--oc-color-text-inverse)"
       />
-      <span
-        class="oc-text-truncate oc-filter-chip-label"
-        v-text="!!selectedItemNames.length ? selectedItemNames[0] : filterLabel"
-      />
+      <slot name="active" :selected-item-names="selectedItemNames">
+        <span
+          class="oc-text-truncate oc-filter-chip-label"
+          v-text="!!selectedItemNames.length ? selectedItemNames[0] : filterLabel"
+        />
+      </slot>
       <span v-if="selectedItemNames.length > 1" v-text="` +${selectedItemNames.length - 1}`" />
       <oc-icon v-if="!filterActive && !isToggle" name="arrow-down-s" size="small" />
     </oc-button>

packages/design-system/src/styles/theme/oc-visibility.scss

@@ -89,3 +89,18 @@
   white-space: nowrap;
   width: 1px !important;
 }
+
+@media (max-width: $oc-breakpoint-xsmall-max) {
+  .oc-invisible-sr\@s {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    // Need to make sure we override any existing styles.
+    position: absolute !important;
+    top: 0;
+    white-space: nowrap;
+    width: 1px !important;
+  }
+}

packages/web-app-search/src/portals/SearchBar.vue

@@ -28,7 +28,7 @@
       :label="searchLabel"
       :type-ahead="true"
       :value="term"
-      :placeholder="searchLabel"
+      :placeholder="searchPlaceholder"
       :button-hidden="true"
       :show-cancel-button="showCancelButton"
       :show-advanced-search-button="listProviderAvailable"
@@ -674,6 +674,14 @@ const searchLabel = computed(() => {
   return $gettext('Enter search term')
 })
 
+const searchPlaceholder = computed(() => {
+  if (unref(isMobileWidth)) {
+    return ''
+  }
+
+  return unref(searchLabel)
+})
+
 function created() {
   clearTermEvent.value = eventBus.subscribe('app.search.term.clear', () => {
     term.value = ''
@@ -742,6 +750,7 @@ onBeforeUnmount(() => {
         border: 1px solid var(--oc-color-input-border);
         z-index: var(--oc-z-index-modal);
         margin: 0 auto;
+        padding-right: 5.875rem;
       }
     }
   }

packages/web-pkg/src/components/SearchBarFilter.vue

@@ -23,12 +23,18 @@
             :data-test-id="option.id"
             @click="onOptionSelected(option)"
           >
+            <oc-icon class="oc-hidden@s" :name="option.icon" />
             <span>{{ option.title }}</span>
             <div v-if="option.id === currentSelection.id" class="oc-flex">
               <oc-icon name="check" />
             </div>
-          </oc-button> </template
-      ></oc-filter-chip>
+          </oc-button>
+        </template>
+        <template #active>
+          <oc-icon class="oc-hidden@s" :name="currentSelection.icon" />
+          <span class="oc-text-truncate oc-invisible-sr@s">{{ currentSelectionTitle }}</span>
+        </template>
+      </oc-filter-chip>
     </div>
   </div>
 </template>
@@ -42,6 +48,7 @@ type LocationOption = {
   id: string
   title: string
   enabled: Ref<boolean> | boolean
+  icon: string
 }
 
 interface Props {
@@ -67,11 +74,13 @@ const locationOptions = computed<LocationOption[]>(() => [
   {
     id: SearchLocationFilterConstants.currentFolder,
     title: $gettext('Current folder'),
+    icon: 'folder',
     enabled: props.currentFolderAvailable
   },
   {
     id: SearchLocationFilterConstants.allFiles,
     title: $gettext('All files'),
+    icon: 'globe',
     enabled: true
   }
 ])
@@ -130,11 +139,22 @@ const onOptionSelected = (option: LocationOption) => {
   z-index: 9999;
   margin-right: 34px !important;
   float: right;
+
   .oc-drop {
-    width: 180px;
+    width: 220px;
+
+    @media (min-width: 640px) {
+      width: 180px;
+    }
+  }
+
+  .oc-filter-chip-button {
+    justify-content: flex-start;
   }
 }
 .search-bar-filter-item {
+  justify-content: flex-start;
+
   &:hover {
     background-color: var(--oc-color-background-hover) !important;
   }