From ea900724387749011f230956304affde95ff53b4 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 30 Sep 2022 09:58:39 +0200
Subject: [PATCH 1/8] Adjust search bar design on small screens

---
 .../5.7.0_2022-09-09/enhancement-update-ods   |  10 +-
 .../bugfix-search-bar-on-small-screens        |   6 +
 .../web-app-search/src/portals/SearchBar.vue  | 104 +++++++++++++-----
 .../src/components/Topbar/ThemeSwitcher.vue   |   5 +-
 .../src/components/Topbar/TopBar.vue          |   6 +
 .../__snapshots__/ThemeSwitcher.spec.js.snap  |  12 +-
 tests/acceptance/pageObjects/webPage.js       |   6 +-
 7 files changed, 102 insertions(+), 47 deletions(-)
 create mode 100644 changelog/unreleased/bugfix-search-bar-on-small-screens

diff --git a/changelog/5.7.0_2022-09-09/enhancement-update-ods b/changelog/5.7.0_2022-09-09/enhancement-update-ods
index 05ab5c7de12..7aa9d5a77b4 100644
--- a/changelog/5.7.0_2022-09-09/enhancement-update-ods
+++ b/changelog/5.7.0_2022-09-09/enhancement-update-ods
@@ -1,6 +1,6 @@
-Enhancement: Update ODS to v14.0.0-alpha.18
+Enhancement: Update ODS to v14.0.0-alpha.19
 
-We updated the ownCloud Design System to version 14.0.0-alpha.18. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+We updated the ownCloud Design System to version 14.0.0-alpha.19. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
 
 * Bugfix - Omit special characters in user avatar initials: [#2070](https://github.com/owncloud/owncloud-design-system/issues/2070)
 * Bugfix - Avatar link icon: [#2269](https://github.com/owncloud/owncloud-design-system/pull/2269)
@@ -26,6 +26,8 @@ We updated the ownCloud Design System to version 14.0.0-alpha.18. Please refer t
 * Enhancement - Progress bar indeterminate state: [#2200](https://github.com/owncloud/owncloud-design-system/pull/2200)
 * Enhancement - Redesign notifications: [#2210](https://github.com/owncloud/owncloud-design-system/pull/2210)
 * Enhancement - Use Inter font: [#2270](https://github.com/owncloud/owncloud-design-system/pull/2270)
+* Enhancement - Button text align left: [#2323](https://github.com/owncloud/owncloud-design-system/pull/2323)
+* Enhancement - "Cancel"-button and -handler in OcSearchBar: [#2328](https://github.com/owncloud/owncloud-design-system/pull/2328)
 
-https://github.com/owncloud/web/pull/7626
-https://github.com/owncloud/owncloud-design-system/releases/tag/v14.0.0-alpha.18
+https://github.com/owncloud/web/pull/7675
+https://github.com/owncloud/owncloud-design-system/releases/tag/v14.0.0-alpha.19
diff --git a/changelog/unreleased/bugfix-search-bar-on-small-screens b/changelog/unreleased/bugfix-search-bar-on-small-screens
new file mode 100644
index 00000000000..765daeb7163
--- /dev/null
+++ b/changelog/unreleased/bugfix-search-bar-on-small-screens
@@ -0,0 +1,6 @@
+Bugfix: Search bar on small screens
+
+We've fixed the display of the search bar on small screens.
+
+https://github.com/owncloud/web/pull/7675
+https://github.com/owncloud/web/issues/7617
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index f7f9e7d110a..108c35fb36b 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -1,5 +1,11 @@
 <template>
-  <div v-if="availableProviders.length" id="files-global-search" data-custom-key-bindings="true">
+  <div
+    v-if="availableProviders.length"
+    id="files-global-search"
+    ref="searchBar"
+    class="oc-flex"
+    data-custom-key-bindings="true"
+  >
     <oc-search-bar
       id="files-global-search-bar"
       ref="search"
@@ -7,6 +13,9 @@
       :type-ahead="true"
       :placeholder="searchLabel"
       :button-hidden="true"
+      :show-cancel-button="showCancelButton"
+      cancel-button-variation="inverse"
+      :cancel-handler="cancelSearch"
       @input="updateTerm"
       @clear="onClear"
       @click.native="term && $refs.optionsDrop.show()"
@@ -15,6 +24,15 @@
       @keyup.native.down="onKeyUpDown"
       @keyup.native.enter="onKeyUpEnter"
     />
+    <oc-button
+      v-oc-tooltip="$gettext('Display search bar')"
+      :aria-label="$gettext('Click to display and focus the search bar')"
+      class="mobile-search-btn oc-mr-s"
+      appearance="raw"
+      @click="showSearchBar"
+    >
+      <oc-icon name="search" variation="inverse" fill-type="line"></oc-icon>
+    </oc-button>
     <oc-drop
       id="files-global-search-options"
       ref="optionsDrop"
@@ -88,6 +106,8 @@ export default {
 
   data() {
     return {
+      resizeObserver: new ResizeObserver(this.onResize),
+      showCancelButton: false,
       term: '',
       activeProvider: undefined,
       optionsVisible: false,
@@ -177,6 +197,14 @@ export default {
     }
   },
 
+  mounted() {
+    this.resizeObserver.observe(this.$refs.searchBar)
+  },
+
+  beforeDestroy() {
+    this.resizeObserver.unobserve(this.$refs.searchBar)
+  },
+
   methods: {
     onClear() {
       this.term = ''
@@ -281,6 +309,24 @@ export default {
     isPreviewElementActive(searchId) {
       const previewElements = this.$refs.optionsDrop.$el.querySelectorAll('.preview')
       return previewElements[this.activePreviewIndex]?.dataset?.searchId === searchId
+    },
+    showSearchBar() {
+      document.getElementById('files-global-search-bar').style.visibility = 'visible'
+      document.getElementsByClassName('oc-search-input')[0].focus()
+      this.showCancelButton = true
+    },
+    cancelSearch() {
+      document.getElementById('files-global-search-bar').style.visibility = 'hidden'
+      this.showCancelButton = false
+    },
+    onResize() {
+      const searchBarEl = document.getElementById('files-global-search-bar')
+      if (window.innerWidth > 639) {
+        searchBarEl.style.visibility = 'visible'
+        this.showCancelButton = false
+      } else {
+        searchBarEl.style.visibility = 'hidden'
+      }
     }
   }
 }
@@ -288,11 +334,18 @@ export default {
 
 <style lang="scss">
 #files-global-search {
+  .mobile-search-btn {
+    display: none;
+    @media (max-width: 639px) {
+      display: inline-flex;
+    }
+  }
+
   .oc-search-input {
     background-color: var(--oc-color-input-bg);
     transition: 0s;
 
-    @media (max-width: 959px) {
+    @media (max-width: 639px) {
       border: none;
       display: inline;
     }
@@ -301,42 +354,29 @@ export default {
   #files-global-search-bar {
     width: 452px;
     @media (max-width: 959px) {
-      min-width: 2.5rem;
-      width: 2.5rem;
-      background-color: var(--oc-color-swatch-brand-default);
+      width: 300px;
+    }
 
-      input,
-      .oc-width-expand {
-        width: 2.5rem;
-      }
+    @media (max-width: 639px) {
+      visibility: hidden;
+      background-color: var(--oc-color-swatch-brand-default);
+      position: absolute;
+      height: 48px;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      top: 0;
+      width: 95vw !important;
 
       .oc-search-input-icon {
-        padding: 0 var(--oc-space-large);
+        padding: 0 var(--oc-space-xlarge);
       }
 
-      .oc-search-clear {
-        right: var(--oc-space-medium);
-      }
-
-      &:focus-within {
-        position: absolute;
-        height: 60px;
-        left: var(--oc-space-medium);
-        margin: 0 auto;
-        top: 0;
-        width: 100vw !important;
-
-        .oc-search-input-icon {
-          padding: 0 var(--oc-space-xlarge);
-        }
-      }
-
-      &:focus-within input,
+      input,
       input:not(:placeholder-shown) {
         background-color: var(--oc-color-input-bg);
         border: 1px solid var(--oc-color-input-border);
         z-index: var(--oc-z-index-modal);
-        width: 95%;
         margin: 0 auto;
       }
     }
@@ -356,7 +396,11 @@ export default {
       font-weight: 600;
     }
 
-    @media (max-width: 959px) {
+    @media (max-width: 969px) {
+      width: 300px;
+    }
+
+    @media (max-width: 639px) {
       width: 93vw !important;
     }
 
diff --git a/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue b/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
index 24b9c347284..b33da8fe3ad 100644
--- a/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
+++ b/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
@@ -7,7 +7,7 @@
     variation="inverse"
     @click="toggleTheme"
   >
-    <span class="oc-visible@s" :aria-label="switchLabel" v-text="switchText" />
+    <span class="oc-visible@s" :aria-label="switchLabel" />
     <oc-icon :name="switchIcon" fill-type="line" />
   </oc-button>
 </template>
@@ -50,9 +50,6 @@ export default {
     },
     switchLabel() {
       return this.$gettext('Currently used theme')
-    },
-    switchText() {
-      return this.isLightTheme ? this.$gettext('Light mode') : this.$gettext('Dark mode')
     }
   },
   methods: {
diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue
index 6528905d9f9..9f0f1cc8309 100644
--- a/packages/web-runtime/src/components/Topbar/TopBar.vue
+++ b/packages/web-runtime/src/components/Topbar/TopBar.vue
@@ -113,6 +113,12 @@ export default {
   position: sticky;
   z-index: 5;
 
+  .portal-wrapper {
+    @media (max-width: 639px) {
+      margin-left: auto;
+    }
+  }
+
   img {
     max-height: 38px;
     image-rendering: auto;
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.js.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.js.snap
index b6466c1f14c..1deac5194ff 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.js.snap
@@ -1,37 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ThemeSwitcher component restores dark theme if dark theme is saved in localstorage 1`] = `
-<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s"></span>
   <oc-icon-stub name="moon-clear" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component restores light theme if light theme is saved in localstorage 1`] = `
-<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s"></span>
   <oc-icon-stub name="sun" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually renders a button, initially in dark mode if user prefers dark color scheme 1`] = `
-<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s"></span>
   <oc-icon-stub name="moon-clear" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually renders a button, initially in light mode per default 1`] = `
-<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s"></span>
   <oc-icon-stub name="sun" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually toggles between themes upon click 1`] = `
-<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s"></span>
   <oc-icon-stub name="moon-clear" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually toggles between themes upon click 2`] = `
-<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s"></span>
   <oc-icon-stub name="sun" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
diff --git a/tests/acceptance/pageObjects/webPage.js b/tests/acceptance/pageObjects/webPage.js
index d77b772b610..d9bdb7b3ea4 100644
--- a/tests/acceptance/pageObjects/webPage.js
+++ b/tests/acceptance/pageObjects/webPage.js
@@ -22,8 +22,8 @@ module.exports = {
           (result) => {
             if (result.value === true) {
               this.click('@openSearchButton')
-                .waitForElementVisible('@searchInputFieldLowResolution')
-                .setValue('@searchInputFieldLowResolution', [searchTerm, this.api.Keys.ENTER])
+                .waitForElementVisible('@searchInputFieldHighResolution')
+                .setValue('@searchInputFieldHighResolution', [searchTerm, this.api.Keys.ENTER])
             } else {
               this.waitForElementVisible('@searchInputFieldHighResolution').setValue(
                 '@searchInputFieldHighResolution',
@@ -303,7 +303,7 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     openSearchButton: {
-      selector: '#files-open-search-btn'
+      selector: '.mobile-search-btn'
     },
     userMenuButton: {
       selector: '#_userMenuButton'

From f6f7fd20bbf248428ffd7fa00d340a5ee968473c Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 30 Sep 2022 10:03:36 +0200
Subject: [PATCH 2/8] Undo changelog ODS update

---
 changelog/5.7.0_2022-09-09/enhancement-update-ods | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/changelog/5.7.0_2022-09-09/enhancement-update-ods b/changelog/5.7.0_2022-09-09/enhancement-update-ods
index 7aa9d5a77b4..05ab5c7de12 100644
--- a/changelog/5.7.0_2022-09-09/enhancement-update-ods
+++ b/changelog/5.7.0_2022-09-09/enhancement-update-ods
@@ -1,6 +1,6 @@
-Enhancement: Update ODS to v14.0.0-alpha.19
+Enhancement: Update ODS to v14.0.0-alpha.18
 
-We updated the ownCloud Design System to version 14.0.0-alpha.19. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+We updated the ownCloud Design System to version 14.0.0-alpha.18. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
 
 * Bugfix - Omit special characters in user avatar initials: [#2070](https://github.com/owncloud/owncloud-design-system/issues/2070)
 * Bugfix - Avatar link icon: [#2269](https://github.com/owncloud/owncloud-design-system/pull/2269)
@@ -26,8 +26,6 @@ We updated the ownCloud Design System to version 14.0.0-alpha.19. Please refer t
 * Enhancement - Progress bar indeterminate state: [#2200](https://github.com/owncloud/owncloud-design-system/pull/2200)
 * Enhancement - Redesign notifications: [#2210](https://github.com/owncloud/owncloud-design-system/pull/2210)
 * Enhancement - Use Inter font: [#2270](https://github.com/owncloud/owncloud-design-system/pull/2270)
-* Enhancement - Button text align left: [#2323](https://github.com/owncloud/owncloud-design-system/pull/2323)
-* Enhancement - "Cancel"-button and -handler in OcSearchBar: [#2328](https://github.com/owncloud/owncloud-design-system/pull/2328)
 
-https://github.com/owncloud/web/pull/7675
-https://github.com/owncloud/owncloud-design-system/releases/tag/v14.0.0-alpha.19
+https://github.com/owncloud/web/pull/7626
+https://github.com/owncloud/owncloud-design-system/releases/tag/v14.0.0-alpha.18

From f77d04015c66770718637f4668ce293166cb6874 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 30 Sep 2022 10:13:13 +0200
Subject: [PATCH 3/8] Fix acceptance tests

---
 tests/acceptance/pageObjects/webPage.js | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/tests/acceptance/pageObjects/webPage.js b/tests/acceptance/pageObjects/webPage.js
index d9bdb7b3ea4..ff2091a9d1a 100644
--- a/tests/acceptance/pageObjects/webPage.js
+++ b/tests/acceptance/pageObjects/webPage.js
@@ -12,7 +12,9 @@ module.exports = {
      *
      * @param {string} searchTerm
      */
-    search: function (searchTerm) {
+    search: async function (searchTerm) {
+      // wait for search indexing to be finished
+      await this.pause(1000)
       return this.initAjaxCounters()
         .isVisible(
           {
@@ -22,13 +24,13 @@ module.exports = {
           (result) => {
             if (result.value === true) {
               this.click('@openSearchButton')
-                .waitForElementVisible('@searchInputFieldHighResolution')
-                .setValue('@searchInputFieldHighResolution', [searchTerm, this.api.Keys.ENTER])
+                .waitForElementVisible('@searchInputField')
+                .setValue('@searchInputField', [searchTerm, this.api.Keys.ENTER])
             } else {
-              this.waitForElementVisible('@searchInputFieldHighResolution').setValue(
-                '@searchInputFieldHighResolution',
-                [searchTerm, this.api.Keys.ENTER]
-              )
+              this.waitForElementVisible('@searchInputField').setValue('@searchInputField', [
+                searchTerm,
+                this.api.Keys.ENTER
+              ])
             }
           }
         )
@@ -287,14 +289,10 @@ module.exports = {
     ocDialogPromptAlert: {
       selector: '.oc-modal .oc-text-input-message'
     },
-    searchInputFieldHighResolution: {
+    searchInputField: {
       selector: '(//input[contains(@class, "oc-search-input")])[1]',
       locateStrategy: 'xpath'
     },
-    searchInputFieldLowResolution: {
-      selector: '(//input[contains(@class, "oc-search-input")])[2]',
-      locateStrategy: 'xpath'
-    },
     searchLoadingIndicator: {
       selector: '#files-global-search-bar .oc-spinner'
     },

From c4a40e93ffb9022f27ae1e282d7004a1d6da9dd0 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 30 Sep 2022 10:28:11 +0200
Subject: [PATCH 4/8] Fix unit tests

---
 .../web-app-search/tests/unit/portals/SearchBar.spec.ts     | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
index 5d34efe5425..c6b7784d88a 100644
--- a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
+++ b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
@@ -55,6 +55,12 @@ const selectors = {
 beforeEach(() => {
   jest.resetAllMocks()
 
+  window.ResizeObserver = jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn()
+  }))
+
   providerFiles.previewSearch.search.mockImplementation(() => {
     return {
       values: [

From 705ff68a83a746903a3fde87e1cd2a1fcb02f1c6 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 5 Oct 2022 16:43:30 +0200
Subject: [PATCH 5/8] Fix search bar even gets hidden if optionsDrop (active
 search) is visible

---
 packages/web-app-search/src/portals/SearchBar.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 108c35fb36b..eb36ef893e7 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -321,10 +321,12 @@ export default {
     },
     onResize() {
       const searchBarEl = document.getElementById('files-global-search-bar')
+      const optionDropVisible = !!document.querySelector('.tippy-box[data-state="visible"]')
+      console.log(optionDropVisible)
       if (window.innerWidth > 639) {
         searchBarEl.style.visibility = 'visible'
         this.showCancelButton = false
-      } else {
+      } else if (!optionDropVisible) {
         searchBarEl.style.visibility = 'hidden'
       }
     }

From 1a2da9047ca978db6d9c1ac1c400866e5f7538da Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 5 Oct 2022 16:44:46 +0200
Subject: [PATCH 6/8] RM console log

---
 packages/web-app-search/src/portals/SearchBar.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index eb36ef893e7..799be2277b0 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -322,7 +322,6 @@ export default {
     onResize() {
       const searchBarEl = document.getElementById('files-global-search-bar')
       const optionDropVisible = !!document.querySelector('.tippy-box[data-state="visible"]')
-      console.log(optionDropVisible)
       if (window.innerWidth > 639) {
         searchBarEl.style.visibility = 'visible'
         this.showCancelButton = false

From e0a1326bda5e4edf60743e9dbe0e81bd23d2aa25 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 5 Oct 2022 16:49:48 +0200
Subject: [PATCH 7/8] Fix search button is black in dark mode

---
 packages/web-app-search/src/portals/SearchBar.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 799be2277b0..04bc19008c9 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -29,9 +29,10 @@
       :aria-label="$gettext('Click to display and focus the search bar')"
       class="mobile-search-btn oc-mr-s"
       appearance="raw"
+      variation="inverse"
       @click="showSearchBar"
     >
-      <oc-icon name="search" variation="inverse" fill-type="line"></oc-icon>
+      <oc-icon name="search" fill-type="line"></oc-icon>
     </oc-button>
     <oc-drop
       id="files-global-search-options"

From 4f43da093cdad003c54d0768ffdfc58bf62765df Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 5 Oct 2022 17:00:04 +0200
Subject: [PATCH 8/8] Fix cancel button not shown

---
 packages/web-app-search/src/portals/SearchBar.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 04bc19008c9..9f3b13e7ea0 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -323,11 +323,18 @@ export default {
     onResize() {
       const searchBarEl = document.getElementById('files-global-search-bar')
       const optionDropVisible = !!document.querySelector('.tippy-box[data-state="visible"]')
+
       if (window.innerWidth > 639) {
         searchBarEl.style.visibility = 'visible'
         this.showCancelButton = false
-      } else if (!optionDropVisible) {
-        searchBarEl.style.visibility = 'hidden'
+      } else {
+        if (optionDropVisible) {
+          searchBarEl.style.visibility = 'visible'
+          this.showCancelButton = true
+        } else {
+          searchBarEl.style.visibility = 'hidden'
+          this.showCancelButton = false
+        }
       }
     }
   }