From 0a91adf0b619e1f10eece2e22e855ebc4f0d1e6a Mon Sep 17 00:00:00 2001
From: Abel Cota <abel@escire.lat>
Date: Tue, 11 Aug 2026 12:17:39 -0600
Subject: [PATCH 1/2] Fix: 5503, applying fixes for mobile/tablet screens

---
 postcss.config.js                             |  6 ++++-
 src/app/footer/footer.component.scss          | 22 +++++++++++++++++-
 src/app/header/header.component.scss          |  1 +
 .../search-navbar.component.html              |  4 ++--
 .../search-navbar.component.scss              | 23 ++++++++++++++++---
 .../search-navbar/search-navbar.component.ts  | 13 +++++++++++
 src/app/shared/animations/slide.ts            |  4 ++++
 .../sidebar/page-with-sidebar.component.scss  | 14 ++++++++++-
 .../dspace/app/header/header.component.scss   |  1 +
 src/themes/dspace/styles/_global-styles.scss  |  6 +++++
 10 files changed, 86 insertions(+), 8 deletions(-)

diff --git a/postcss.config.js b/postcss.config.js
index f8b9666b312..a6dcca8f22f 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,10 @@
 module.exports = {
   plugins: [
     require('postcss-import')(),
-    require('postcss-preset-env')()
+    require('postcss-preset-env')({
+      features: {
+        'has-pseudo-class': false
+      }
+    })
   ]
 };
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 9381d7378f9..bb56a84dde6 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -22,6 +22,8 @@
     }
 
     .bottom-footer {
+      flex-wrap: wrap;
+
       .notify-enabled {
         position: relative;
         margin-top: 4px;
@@ -36,7 +38,7 @@
           margin-bottom: 8.5px;
         }
 
-        @media screen and (min-width: map-get($grid-breakpoints, md))  {
+        @media screen and (min-width: map-get($grid-breakpoints, xl))  {
           position: absolute;
           bottom: 4px;
           right: 0;
@@ -70,6 +72,24 @@
           }
         }
       }
+
+      @include media-breakpoint-down(md) {
+        ul {
+          flex-wrap: wrap;
+          column-gap: calc(var(--bs-spacer) / 2);
+          row-gap: calc(var(--bs-spacer) / 2);
+
+          li {
+            &::after {
+              display: none;
+            }
+
+            a, .btn-link {
+              white-space: nowrap;
+            }
+          }
+        }
+      }
     }
 
     .btn {
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index b709198e389..12b0b066352 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,6 +1,7 @@
 :host {
   header {
     background-color: var(--ds-header-bg);
+    position: relative;
   }
 
   .navbar-brand img {
diff --git a/src/app/search-navbar/search-navbar.component.html b/src/app/search-navbar/search-navbar.component.html
index 4211462005f..ed769798f59 100644
--- a/src/app/search-navbar/search-navbar.component.html
+++ b/src/app/search-navbar/search-navbar.component.html
@@ -1,7 +1,7 @@
 <div (dsClickOutside)="collapse()">
   <div class="d-inline-block position-relative">
-    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" class="d-flex">
-      <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
+    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" [class.search-expanded]="searchExpanded || collapsing" class="d-flex">
+      <input #searchInput [@toggleAnimation]="isExpanded" (@toggleAnimation.done)="onAnimationDone()" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
              autocomplete="off"
              class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-end p1"
diff --git a/src/app/search-navbar/search-navbar.component.scss b/src/app/search-navbar/search-navbar.component.scss
index 965cebfb3c9..cbfe2561262 100644
--- a/src/app/search-navbar/search-navbar.component.scss
+++ b/src/app/search-navbar/search-navbar.component.scss
@@ -22,10 +22,27 @@ input[type="text"] {
 }
 
 @media screen and (max-width: map-get($grid-breakpoints, md)) {
-  .query:focus {
-    max-width: 250px !important;
-    width: 40vw !important;
+  .d-inline-block.position-relative {
+    position: static !important;
   }
 
+  form.search-expanded {
+    input[type="text"] {
+      position: absolute !important;
+      top: calc(65% + var(--ds-header-navbar-border-bottom-height, 0px));
+      right: calc(var(--bs-gutter-x, 1.5rem) / 2);
+      left: auto;
+      width: 220px !important;
+      max-width: 220px;
+      margin-top: 0;
+      padding: 0.375rem 0.75rem;
+      border: 1px solid var(--ds-header-icon-color);
+      border-radius: 4px;
+      background-color: #fff !important;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      opacity: 1;
+      z-index: 1001;
+    }
+  }
 }
 
diff --git a/src/app/search-navbar/search-navbar.component.ts b/src/app/search-navbar/search-navbar.component.ts
index e2ca9df5a70..61385d91db8 100644
--- a/src/app/search-navbar/search-navbar.component.ts
+++ b/src/app/search-navbar/search-navbar.component.ts
@@ -42,6 +42,8 @@ export class SearchNavbarComponent {
 
   // Search input field
   @ViewChild('searchInput') searchField: ElementRef;
+  // Whether the collapse animation is still running, keeps the dropdown visible until it finishes
+  collapsing = false;
 
   constructor(private formBuilder: UntypedFormBuilder, private router: Router, private searchService: SearchService) {
     this.searchForm = this.formBuilder.group(({
@@ -62,9 +64,20 @@ export class SearchNavbarComponent {
    * Collapses & blurs search bar by angular animation, see expandSearchInput
    */
   collapse() {
+    if (!this.searchExpanded) {
+      return;
+    }
     this.searchField.nativeElement.blur();
     this.searchExpanded = false;
     this.isExpanded = 'collapsed';
+    this.collapsing = true;
+  }
+
+  /**
+   * Called when the expand/collapse animation finishes
+   */
+  onAnimationDone(): void {
+    this.collapsing = false;
   }
 
   /**
diff --git a/src/app/shared/animations/slide.ts b/src/app/shared/animations/slide.ts
index 59fc6821451..338163de336 100644
--- a/src/app/shared/animations/slide.ts
+++ b/src/app/shared/animations/slide.ts
@@ -58,6 +58,10 @@ export const expandSearchInput = trigger('toggleAnimation', [
     width: '250px',
     opacity: '1',
   })),
+  transition('void => collapsed', style({
+    width: '0',
+    opacity: '0',
+  })),
   transition('* => collapsed', group([
     animate('300ms ease-in-out', style({
       width: '30px',
diff --git a/src/app/shared/sidebar/page-with-sidebar.component.scss b/src/app/shared/sidebar/page-with-sidebar.component.scss
index b0e048beaee..67ead1a32da 100644
--- a/src/app/shared/sidebar/page-with-sidebar.component.scss
+++ b/src/app/shared/sidebar/page-with-sidebar.component.scss
@@ -20,6 +20,7 @@
 
   @include media-breakpoint-down(md) {
     position: relative;
+    left: 0 !important;
 
     &.row-offcanvas {
       position: relative;
@@ -39,7 +40,18 @@
       width: 100%;
       height: 100%;
       overflow: auto;
-      background-color: var(--bs-body-bg)
+      background-color: var(--bs-body-bg);
+
+      &.active {
+        position: relative;
+        left: 0;
+        height: auto;
+        overflow: visible;
+      }
+    }
+
+    .sidebar-content.active ~ .col-12:not(.sidebar-content) {
+      display: none;
     }
   }
 }
diff --git a/src/themes/dspace/app/header/header.component.scss b/src/themes/dspace/app/header/header.component.scss
index 5aae8af0171..578549998f0 100644
--- a/src/themes/dspace/app/header/header.component.scss
+++ b/src/themes/dspace/app/header/header.component.scss
@@ -10,6 +10,7 @@
 
     &-container {
       min-height: var(--ds-header-height);
+      position: relative;
     }
   }
 
diff --git a/src/themes/dspace/styles/_global-styles.scss b/src/themes/dspace/styles/_global-styles.scss
index ffca3cda13c..0bbfbf69403 100644
--- a/src/themes/dspace/styles/_global-styles.scss
+++ b/src/themes/dspace/styles/_global-styles.scss
@@ -3,6 +3,12 @@
 // imports the base global style
 @import '../../../styles/_global-styles.scss';
 
+@media screen and (max-width: map-get($grid-breakpoints, md)) {
+  #main-site-header-container:has(form.search-expanded) {
+    margin-bottom: 25px;
+  }
+}
+
 .facet-filter, .setting-option, .advanced-search {
   background-color: var(--bs-light);
   border-radius: var(--bs-border-radius);

From fa3284670fa423f99daa6acbb5a1a5e247272fe7 Mon Sep 17 00:00:00 2001
From: Abel Cota <abel@escire.lat>
Date: Tue, 11 Aug 2026 14:05:24 -0600
Subject: [PATCH 2/2] Issue 5503: Applying fixes for unit test and rendering

---
 .../search-navbar/search-navbar.component.ts   | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/app/search-navbar/search-navbar.component.ts b/src/app/search-navbar/search-navbar.component.ts
index 61385d91db8..5b5dc5482e4 100644
--- a/src/app/search-navbar/search-navbar.component.ts
+++ b/src/app/search-navbar/search-navbar.component.ts
@@ -1,4 +1,5 @@
 import {
+  ChangeDetectorRef,
   Component,
   ElementRef,
   ViewChild,
@@ -45,7 +46,12 @@ export class SearchNavbarComponent {
   // Whether the collapse animation is still running, keeps the dropdown visible until it finishes
   collapsing = false;
 
-  constructor(private formBuilder: UntypedFormBuilder, private router: Router, private searchService: SearchService) {
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private router: Router,
+    private searchService: SearchService,
+    private cdr: ChangeDetectorRef,
+  ) {
     this.searchForm = this.formBuilder.group(({
       query: '',
     }));
@@ -77,7 +83,15 @@ export class SearchNavbarComponent {
    * Called when the expand/collapse animation finishes
    */
   onAnimationDone(): void {
-    this.collapsing = false;
+    // The animation's "done" event can fire synchronously while Angular is still
+    // running change detection (e.g. in tests). Deferring the state change avoids
+    // ExpressionChangedAfterItHasBeenCheckedError. The component's OnPush ancestors
+    // are not notified when the flag is reset outside an event handler, so the view
+    // has to be marked for check explicitly.
+    setTimeout(() => {
+      this.collapsing = false;
+      this.cdr.markForCheck();
+    });
   }
 
   /**