From a15b0142bf6d021926ca28fca80bb16cc90b60e4 Mon Sep 17 00:00:00 2001
From: Guillermo <guillermo@escire.lat>
Date: Fri, 4 Sep 2026 18:10:01 -0600
Subject: [PATCH] fix #6086 : resolve WCAG 1.4.10 reflow issues on mobile and
 200% zoom

---
 .../community-list.component.html             |  6 ++--
 .../community-list.component.scss             | 30 +++++++++++++++++++
 src/app/header/header.component.scss          | 11 ++++---
 .../full-file-section.component.html          |  8 ++---
 ...ace-new-submission-dropdown.component.html |  6 ++--
 ...ace-new-submission-dropdown.component.scss | 10 +++++--
 6 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html
index 0b6ba6e37e4..42afa42b8fe 100644
--- a/src/app/community-list-page/community-list/community-list.component.html
+++ b/src/app/community-list-page/community-list/community-list.component.html
@@ -3,7 +3,7 @@
 }
 <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl" [trackBy]="trackBy">
   <!-- This is the tree node template for show more node -->
-  <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
+  <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding [cdkTreeNodePaddingIndent]="24"
     class="example-tree-node show-more-node">
     <div class="btn-group">
       <span aria-hidden="true" class="btn btn-default invisible" cdkTreeNodeToggle>
@@ -27,7 +27,7 @@
     </div>
   </cdk-tree-node>
   <!-- This is the tree node template for expandable nodes (coms and subcoms with children) -->
-  <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
+  <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding [cdkTreeNodePaddingIndent]="24"
     class="example-tree-node expandable-node">
     <div class="btn-group">
       @if (hasChild(null, node) | async) {
@@ -85,7 +85,7 @@
     }
   </cdk-tree-node>
   <!-- This is the tree node template for leaf nodes (collections and (sub)coms without children) -->
-  <cdk-tree-node *cdkTreeNodeDef="let node; when: !(hasChild && isShowMore)" cdkTreeNodePadding
+  <cdk-tree-node *cdkTreeNodeDef="let node; when: !(hasChild && isShowMore)" cdkTreeNodePadding [cdkTreeNodePaddingIndent]="24"
     class="example-tree-node childless-node">
     <div class="btn-group">
       <span aria-hidden="true" class="btn btn-default invisible" cdkTreeNodeToggle>
diff --git a/src/app/community-list-page/community-list/community-list.component.scss b/src/app/community-list-page/community-list/community-list.component.scss
index 2e33380a29f..9d65a1b7799 100644
--- a/src/app/community-list-page/community-list/community-list.component.scss
+++ b/src/app/community-list-page/community-list/community-list.component.scss
@@ -2,3 +2,33 @@
   display: block;
   width: 16px;
 }
+
+// Fix WCAG 1.4.10
+.example-tree-node {
+  .btn-group {
+    flex-wrap: nowrap;
+    align-items: flex-start;
+
+    .d-flex.flex-row {
+      min-width: 0;
+
+      span.d-flex {
+        min-width: 0;
+
+        a.lead {
+          white-space: normal;
+          word-break: break-word;
+          overflow-wrap: anywhere;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .example-tree-node {
+    &[style*="padding-left"] {
+      padding-left: 0.75rem !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index b709198e389..2e1ff89c42d 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -2,30 +2,29 @@
   header {
     background-color: var(--ds-header-bg);
   }
-
   .navbar-brand img {
     max-height: var(--ds-header-logo-height);
     max-width: 100%;
   }
-
+  .navbar-brand {
+    flex-shrink: 1;
+    min-width: 0;
+  }
   .navbar-toggler {
     border: none;
     color: var(--ds-header-icon-color);
-
     &:hover, &:focus {
       color: var(--ds-header-icon-color-hover);
     }
-
     .toggler-icon {
       width: 1.5em;
       height: 1.5em;
       line-height: 1.5;
     }
   }
-
   .navbar, div[role="toolbar"] {
     display: flex;
     gap: calc(var(--bs-spacer) / 3);
     align-items: center;
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/item-page/full/field-components/file-section/full-file-section.component.html b/src/app/item-page/full/field-components/file-section/full-file-section.component.html
index b8eaa0ae2de..bdbb23f96e6 100644
--- a/src/app/item-page/full/field-components/file-section/full-file-section.component.html
+++ b/src/app/item-page/full/field-components/file-section/full-file-section.component.html
@@ -13,7 +13,7 @@ <h3 class="h5 simple-view-element-header">
           <div class="col-3">
             <ds-thumbnail [thumbnail]="(file.thumbnail | async)?.payload"></ds-thumbnail>
           </div>
-          <div class="col-7">
+          <div class="col">
             <dl class="row dont-break-out">
               <dt class="col-md-4">
                 {{ "item.page.filesection.name" | translate }}
@@ -38,7 +38,7 @@ <h3 class="h5 simple-view-element-header">
               }
             </dl>
           </div>
-          <div class="col-2">
+          <div class="col-auto">
             <ds-file-download-link [showIcon]="true" [bitstream]="file" [item]="item" cssClasses="btn btn-outline-primary btn-download">
                 <span class="d-none d-md-inline">
                   {{ "item.page.filesection.download" | translate }}
@@ -66,7 +66,7 @@ <h3 class="h5 simple-view-element-header">
           <div class="col-3">
             <ds-thumbnail [thumbnail]="(file.thumbnail | async)?.payload"></ds-thumbnail>
           </div>
-          <div class="col-7">
+          <div class="col">
             <dl class="row">
               <dt class="col-md-4">
                 {{ "item.page.filesection.name" | translate }}
@@ -89,7 +89,7 @@ <h3 class="h5 simple-view-element-header">
               </dd>
             </dl>
           </div>
-          <div class="col-2">
+          <div class="col-auto">
             <ds-file-download-link [showIcon]="true" [bitstream]="file" [item]="item" cssClasses="btn btn-outline-primary btn-download">
                 <span class="d-none d-md-inline">
                   {{ "item.page.filesection.download" | translate }}
diff --git a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html
index 0e167475bf4..9268e07256d 100644
--- a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html
+++ b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html
@@ -7,9 +7,9 @@
   </div>
 }
 @if ((moreThanOne$ | async)) {
-  <div class="add w-100" display="dynamic" placement="bottom-right"
-    ngbDropdown
-    >
+<div class="add w-100"
+  ngbDropdown
+  placement="bottom-end">
     <button class="btn btn-lg btn-primary mt-1 ms-2" id="dropdownSubmission" ngbDropdownToggle
       type="button"  [dsBtnDisabled]="(initialized$ | async) !== true"
       [attr.aria-label]="'mydspace.new-submission' | translate"
diff --git a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.scss b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.scss
index a156132e3fd..6bf25ffee1f 100644
--- a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.scss
+++ b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.scss
@@ -1,11 +1,9 @@
 .parent {
   display: flex;
 }
-
 .upload {
   flex: auto;
 }
-
 .add {
   flex: initial;
 }
@@ -13,4 +11,10 @@
 #entityControlsDropdownMenu {
   min-width: 18rem;
   box-shadow: $btn-focus-box-shadow;
-}
+  max-width: 100vw;
+
+  @media (max-width: 767px) {
+    min-width: 0;
+    max-width: calc(100vw - 5rem);
+  }
+}
\ No newline at end of file