Fix global layout issues

src/components/VContentSwitcher/VContentSwitcherButton.vue

@@ -9,9 +9,12 @@
     @click="$emit('click')"
   >
     <VIcon :icon-path="icon" />
-    <span v-show="showLabel" :class="{ 'ms-2 md:w-20 text-left': showLabel }">{{
-      buttonLabel
-    }}</span>
+    <span
+      v-show="showLabel"
+      class="hidden xs:block"
+      :class="{ 'ms-2 md:w-20 text-left': showLabel }"
+      >{{ buttonLabel }}</span
+    >
     <VIcon
       class="hidden md:block text-dark-charcoal-40 md:ms-2"
       :icon-path="caretDownIcon"

src/components/VHeader/VHeader.vue

@@ -1,9 +1,9 @@
 <template>
   <header
-    class="flex px-4 md:px-7 items-stretch z-40 w-full bg-white gap-x-2 gap-y-4 flex-wrap md:flex-nowrap"
+    class="flex px-4 md:px-7 items-center md:items-stretch z-40 w-screen bg-white gap-x-2 gap-y-4"
     :class="{
-      'py-3': isHeaderScrolled,
-      'py-4': !isHeaderScrolled,
+      'py-3 ': isHeaderScrolled,
+      'py-4 flex-wrap md:flex-nowrap': !isHeaderScrolled,
       'border-b border-white': !isHeaderScrolled && !isMenuOpen,
       'border-b border-dark-charcoal-20':
         isSearchRoute && (isHeaderScrolled || isMenuOpen),
@@ -20,7 +20,7 @@
 
     <VSearchBar
       v-model.trim="searchTerm"
-      class="md:w-full lg:w-1/2 2xl:w-1/3"
+      class="flex-grow lg:flex-grow-0 lg:w-1/2 2xl:w-1/3"
       :size="isMinScreenMd ? 'medium' : isHeaderScrolled ? 'small' : 'large'"
       :class="{
         'order-4 md:order-none w-full md:w-auto': !isHeaderScrolled,
@@ -30,7 +30,7 @@
     >
       <span
         v-show="searchStatus"
-        class="info font-semibold text-xs text-dark-charcoal-70 group-hover:text-dark-charcoal group-focus:text-dark-charcoal mx-4"
+        class="hidden lg:block info font-semibold text-xs text-dark-charcoal-70 group-hover:text-dark-charcoal group-focus:text-dark-charcoal mx-4"
       >
         {{ searchStatus }}
       </span>
@@ -144,16 +144,11 @@ const VHeader = defineComponent({
     const resultsCount = computed(() => store.getters['media/resultCount'])
     const { getI18nCount } = useI18nResultsCount()
     /**
-     * Status is hidden below the medium breakpoint.
-     * It shows Loading... or Number of results on bigger screens.
+     * Additional text at the end of the search bar.
+     * Shows the loading state or result count.
      */
     const searchStatus = computed(() => {
-      if (
-        !isMinScreenMd.value ||
-        !isSearchRoute.value ||
-        store.state.search.query.q === ''
-      )
-        return ''
+      if (!isSearchRoute.value || store.state.search.query.q === '') return ''
       if (isFetching.value) return i18n.t('header.loading')
       return getI18nCount(resultsCount.value)
     })
@@ -237,12 +232,3 @@ const VHeader = defineComponent({
 
 export default VHeader
 </script>
-<style scoped>
-@media (max-width: 767px) {
-  .search-bar-mobile-scrolled {
-    /* outer padding, inner gaps, (logo, content switcher and filter button), additional content switcher padding */
-    /* width: calc(100vw - 2rem - 1.5rem - 3 * 2.5rem - 0.25rem); */
-    width: calc(100vw - 11.25rem);
-  }
-}
-</style>

src/components/VHeader/VLogoButton.vue

@@ -1,7 +1,7 @@
 <template>
   <VButton
     as="NuxtLink"
-    to="/"
+    :to="localePath('/')"
     variant="plain"
     size="disabled"
     class="max-w-min hover:bg-yellow text-dark-charcoal"
@@ -12,7 +12,7 @@
     />
     <OpenverseLogoText
       v-if="!isHeaderScrolled"
-      class="-ml-1 mt-1 me-3"
+      class="hidden xs:block -ml-1 mt-1 me-3"
       :class="{ 'md:hidden': isSearchRoute }"
       width="95"
       height="15"

src/constants/screens.js

@@ -8,6 +8,7 @@ const SCREEN_SIZES = new Map([
   ['lg', 1024],
   ['md', 768],
   ['sm', 640],
+  ['xs', 340],
 ])
 
 const VIEWPORTS = Object.fromEntries(

src/layouts/default.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="app grid h-screen overflow-hidden relative">
-    <VTeleportTarget name="skip-to-content" />
-    <MigrationNotice v-show="isReferredFromCc" />
-    <VTranslationStatusBanner />
-    <VHeader />
+    <div>
+      <VTeleportTarget name="skip-to-content" />
+      <MigrationNotice v-show="isReferredFromCc" />
+      <VTranslationStatusBanner />
+      <VHeader />
+    </div>
     <main
       class="main embedded overflow-x-hidden"
       :class="{ 'has-sidebar': isSidebarVisible }"
@@ -108,23 +110,30 @@ export default embeddedPage
   grid-template-rows: auto 1fr;
 }
 
+@screen md {
+  // Logic for displaying the filter sidebar and search results
+  // as independently-scrolling sections.
+  .main {
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 316px;
+  }
+  // Make the main content area span both grid columns
+  // when the sidebar is closed...
+  .main > *:first-child {
+    grid-column: span 2;
+  }
+  // ...and only one column when it is visible.
+  .main.has-sidebar > *:first-child {
+    grid-column: 1;
+  }
+}
+
 .main {
-  display: grid;
-  grid-template-columns: 1fr 316px;
-  height: 100%;
   overflow: hidden;
 }
-
-.main > * {
+.main > *:not(:empty) {
   overflow-y: scroll;
-  min-height: 100%;
-}
-
-.main > *:first-child {
-  grid-column: span 2;
-}
-
-.main.has-sidebar > *:first-child {
-  grid-column: 1;
+  height: 100%;
 }
 </style>

src/styles/base/generic.sass

@@ -1,7 +1,6 @@
 @import "../utilities/mixins"
 
 $body-background-color: $scheme-main
-$body-min-width: 300px
 $body-rendering: optimizeLegibility
 $body-family: $family-primary
 
@@ -32,7 +31,6 @@ html
   background-color: $body-background-color
   -moz-osx-font-smoothing: grayscale
   -webkit-font-smoothing: antialiased
-  min-width: $body-min-width
   text-rendering: $body-rendering
   text-size-adjust: 100%