From 3104a173472df9802d9a3e9c3631ca58562f5a52 Mon Sep 17 00:00:00 2001
From: Renato <renato@octree.ch>
Date: Mon, 3 Feb 2025 12:04:34 -0300
Subject: [PATCH 1/7] fix: standardize home layout menu UX

---
 .../show.erb                                  |  2 +-
 .../app/helpers/decidim/menu_helper.rb        |  4 +-
 .../packs/stylesheets/decidim/_header.scss    | 76 ++++++-------------
 ..._breadcrumb_main_dropdown_desktop.html.erb | 16 ++--
 4 files changed, 33 insertions(+), 65 deletions(-)

diff --git a/decidim-core/app/cells/decidim/participatory_space_dropdown_metadata/show.erb b/decidim-core/app/cells/decidim/participatory_space_dropdown_metadata/show.erb
index c82169024c640..4fcf867c46222 100644
--- a/decidim-core/app/cells/decidim/participatory_space_dropdown_metadata/show.erb
+++ b/decidim-core/app/cells/decidim/participatory_space_dropdown_metadata/show.erb
@@ -3,7 +3,7 @@
     <%= render :metadata %>
     <%= cell "decidim/content_blocks/menu_breadcrumb_last_activity", model, hide_participatory_space: true %>
   </div>
-  <ul class="menu-bar__secondary-dropdown__menu">
+  <ul class="menu-bar__dropdown-menu">
     <%= render :links %>
   </ul>
 </div>
diff --git a/decidim-core/app/helpers/decidim/menu_helper.rb b/decidim-core/app/helpers/decidim/menu_helper.rb
index 030d83ba21d45..59d004f1b2c54 100644
--- a/decidim-core/app/helpers/decidim/menu_helper.rb
+++ b/decidim-core/app/helpers/decidim/menu_helper.rb
@@ -39,7 +39,7 @@ def breadcrumb_root_menu
       @breadcrumb_root_menu ||= ::Decidim::BreadcrumbRootMenuPresenter.new(
         :menu,
         self,
-        container_options: { class: "menu-bar__main-dropdown__menu" }
+        container_options: { class: "menu-bar__dropdown-menu" }
       )
     end
 
@@ -47,7 +47,7 @@ def mobile_breadcrumb_root_menu
       @mobile_breadcrumb_root_menu ||= ::Decidim::BreadcrumbRootMenuPresenter.new(
         :mobile_menu,
         self,
-        container_options: { class: "menu-bar__main-dropdown__menu" }
+        container_options: { class: "menu-bar__dropdown-menu" }
       )
     end
 
diff --git a/decidim-core/app/packs/stylesheets/decidim/_header.scss b/decidim-core/app/packs/stylesheets/decidim/_header.scss
index e7f1c1a66aef3..f416da3e747a8 100644
--- a/decidim-core/app/packs/stylesheets/decidim/_header.scss
+++ b/decidim-core/app/packs/stylesheets/decidim/_header.scss
@@ -373,15 +373,34 @@ header {
       @apply absolute top-full left-0 bg-white rounded w-full bg-gray-5;
     }
 
+    &__dropdown-menu {
+      @apply w-full md:w-1/4 bg-primary px-4 md:px-8 pt-0 pb-3 md:py-3 divide-y divide-gray-3 text-white;
+
+      > * {
+        @apply py-3 md:py-3.5;
+      }
+
+      a {
+        @apply flex items-center justify-start gap-1 font-semibold text-lg text-white;
+
+        span {
+          @apply min-w-0 truncate;
+        }
+
+        svg {
+          @apply flex-none fill-current;
+        }
+      }
+    }
+
     &__main-dropdown {
-      @apply bg-white divide-y divide-gray-3 rounded-b shadow-lg text-black w-full lg:w-[1280px] h-screen md:h-auto;
+      @apply bg-white flex flex-row rounded-b shadow-lg text-black w-full lg:w-[1280px] h-screen md:h-auto;
 
-      &__bottom,
-      &__top {
-        @apply flex flex-col md:flex-row justify-between p-4 md:p-8 gap-x-8;
+      &__left {
+        @apply flex flex-col justify-between p-4 md:p-8 space-y-5 hidden md:block md:w-3/4;
 
-        &-right {
-          @apply hidden md:block md:w-1/2;
+        &-top {
+          @apply border-b-4 border-gray-3 pb-3;
         }
       }
 
@@ -396,31 +415,6 @@ header {
       &__subtitle {
         @apply hidden text-md md:flex md:text-lg text-gray-2 mt-5;
       }
-
-      &__menu {
-        @apply w-full md:w-1/2 mt-0 grid md:grid-cols-2 gap-x-6 text-secondary;
-
-        > * {
-          @apply py-3 md:py-3.5 border-b last:border-0 border-gray-3;
-
-          /* since the grid has 2 columns, remove the border for these last 2 columns */
-          &:nth-last-child(-n + 2) {
-            @apply md:border-0;
-          }
-        }
-
-        a {
-          @apply flex items-center justify-start gap-1 font-semibold text-lg text-secondary;
-
-          span {
-            @apply min-w-0 truncate;
-          }
-
-          svg {
-            @apply flex-none fill-current;
-          }
-        }
-      }
     }
 
     &__secondary-dropdown {
@@ -434,26 +428,6 @@ header {
         @apply h4 md:h3;
       }
 
-      &__menu {
-        @apply w-full md:w-1/4 bg-primary px-4 md:px-8 pt-0 pb-3 md:py-3 divide-y divide-gray-3 text-white;
-
-        > * {
-          @apply py-3 md:py-3.5;
-        }
-
-        a {
-          @apply flex items-center justify-start gap-1 font-semibold text-lg text-white;
-
-          span {
-            @apply min-w-0 truncate;
-          }
-
-          svg {
-            @apply flex-none fill-current;
-          }
-        }
-      }
-
       &__metadata {
         @apply flex items-center text-sm space-x-6 py-8;
 
diff --git a/decidim-core/app/views/layouts/decidim/header/_menu_breadcrumb_main_dropdown_desktop.html.erb b/decidim-core/app/views/layouts/decidim/header/_menu_breadcrumb_main_dropdown_desktop.html.erb
index d0e62c2dc37a5..0cdce02694277 100644
--- a/decidim-core/app/views/layouts/decidim/header/_menu_breadcrumb_main_dropdown_desktop.html.erb
+++ b/decidim-core/app/views/layouts/decidim/header/_menu_breadcrumb_main_dropdown_desktop.html.erb
@@ -1,16 +1,10 @@
 <div id="<%= id %>" class="menu-bar__main-dropdown">
-  <div class="menu-bar__main-dropdown__top">
-    <div class="menu-bar__main-dropdown__top-left">
+  <div class="menu-bar__main-dropdown__left">
+    <div class="menu-bar__main-dropdown__left-top">
       <%= render partial: "layouts/decidim/header/menu_breadcrumb_main_dropdown_top_left" %>
     </div>
-    <%= breadcrumb_root_menu.render %>
-  </div>
-  <div class="menu-bar__main-dropdown__bottom">
-    <div class="menu-bar__main-dropdown__bottom-left">
-      <%= cell("decidim/highlighted_participatory_process", menu_highlighted_participatory_process) %>
-    </div>
-    <div class="menu-bar__main-dropdown__bottom-right">
-      <%= cell "decidim/content_blocks/menu_breadcrumb_last_activity", current_organization %>
-    </div>
+    <%= cell("decidim/highlighted_participatory_process", menu_highlighted_participatory_process) %>
+    <%= cell "decidim/content_blocks/menu_breadcrumb_last_activity", current_organization %>
   </div>
+  <%= breadcrumb_root_menu.render %>
 </div>

From b9bf73687f494e993b1f1947560f142142ec74a8 Mon Sep 17 00:00:00 2001
From: Renato <renato@octree.ch>
Date: Tue, 4 Feb 2025 07:15:45 -0300
Subject: [PATCH 2/7] fix: gap between title and activity in home menu

---
 .../participatory_space_dropdown_metadata/metadata.erb    | 8 ++++----
 decidim-core/app/packs/stylesheets/decidim/_header.scss   | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/decidim-core/app/cells/decidim/participatory_space_dropdown_metadata/metadata.erb b/decidim-core/app/cells/decidim/participatory_space_dropdown_metadata/metadata.erb
index 5d5ad7881d963..1e19a5fe82e9a 100644
--- a/decidim-core/app/cells/decidim/participatory_space_dropdown_metadata/metadata.erb
+++ b/decidim-core/app/cells/decidim/participatory_space_dropdown_metadata/metadata.erb
@@ -1,9 +1,9 @@
 <h4 class="menu-bar__secondary-dropdown__title"><%= title %></h4>
-<div class="menu-bar__secondary-dropdown__metadata">
-  <% if hashtag.present? %>
+<% if hashtag.present? %>
+  <div class="menu-bar__secondary-dropdown__metadata">
     <span>
       <%= icon "twitter-x-line", class: "text-gray fill-current" %>
       <%= link_to "##{hashtag}", twitter_hashtag_url(hashtag), target: "_blank", class: "text-secondary underline" %>
     </span>
-  <% end %>
-</div>
+  </div>
+<% end %>
diff --git a/decidim-core/app/packs/stylesheets/decidim/_header.scss b/decidim-core/app/packs/stylesheets/decidim/_header.scss
index f416da3e747a8..f64ef4296c927 100644
--- a/decidim-core/app/packs/stylesheets/decidim/_header.scss
+++ b/decidim-core/app/packs/stylesheets/decidim/_header.scss
@@ -425,11 +425,11 @@ header {
       }
 
       &__title {
-        @apply h4 md:h3;
+        @apply h4 md:h3 pb-6;
       }
 
       &__metadata {
-        @apply flex items-center text-sm space-x-6 py-8;
+        @apply flex items-center text-sm space-x-6 pb-6;
 
         > span {
           @apply flex items-center space-x-2;

From 0b36cbb34615fc35c7f1c7b2aa47c78ea97104b2 Mon Sep 17 00:00:00 2001
From: Renato <renato@octree.ch>
Date: Tue, 4 Feb 2025 08:24:34 -0300
Subject: [PATCH 3/7] fix: mobile top-right menu UX

---
 .../app/helpers/decidim/menu_helper.rb        |  2 +-
 .../packs/stylesheets/decidim/_header.scss    | 29 +++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/decidim-core/app/helpers/decidim/menu_helper.rb b/decidim-core/app/helpers/decidim/menu_helper.rb
index 59d004f1b2c54..d2735bd43afb6 100644
--- a/decidim-core/app/helpers/decidim/menu_helper.rb
+++ b/decidim-core/app/helpers/decidim/menu_helper.rb
@@ -47,7 +47,7 @@ def mobile_breadcrumb_root_menu
       @mobile_breadcrumb_root_menu ||= ::Decidim::BreadcrumbRootMenuPresenter.new(
         :mobile_menu,
         self,
-        container_options: { class: "menu-bar__dropdown-menu" }
+        container_options: { class: "menu-bar__main-dropdown__top-menu" }
       )
     end
 
diff --git a/decidim-core/app/packs/stylesheets/decidim/_header.scss b/decidim-core/app/packs/stylesheets/decidim/_header.scss
index f64ef4296c927..54de8ccae9648 100644
--- a/decidim-core/app/packs/stylesheets/decidim/_header.scss
+++ b/decidim-core/app/packs/stylesheets/decidim/_header.scss
@@ -404,6 +404,35 @@ header {
         }
       }
 
+      &__top {
+        @apply w-full px-4;
+
+        &-menu {
+          @apply w-full md:w-1/2 mt-0 grid md:grid-cols-2 gap-x-6 text-secondary;
+
+          > * {
+            @apply py-3 md:py-3.5 border-b last:border-0 border-gray-3;
+  
+            /* since the grid has 2 columns, remove the border for these last 2 columns */
+            &:nth-last-child(-n + 2) {
+              @apply md:border-0;
+            }
+          }
+  
+          a {
+            @apply flex items-center justify-start gap-1 font-semibold text-lg text-secondary;
+  
+            span {
+              @apply min-w-0 truncate;
+            }
+  
+            svg {
+              @apply flex-none fill-current;
+            }
+          }
+        }
+      }
+
       &__bottom {
         @apply hidden md:flex;
       }

From 1dd5d254e2512078b4f3ee44edf6d88c33a62a46 Mon Sep 17 00:00:00 2001
From: Renato <renato@octree.ch>
Date: Wed, 5 Feb 2025 12:51:50 -0300
Subject: [PATCH 4/7] fix: add ellipsis to long text in title

---
 .../app/packs/stylesheets/decidim/_header.scss         |  4 ----
 .../header/_menu_breadcrumb_mobile_tablet.html.erb     | 10 +++++-----
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/decidim-core/app/packs/stylesheets/decidim/_header.scss b/decidim-core/app/packs/stylesheets/decidim/_header.scss
index 54de8ccae9648..b4d3cbff288de 100644
--- a/decidim-core/app/packs/stylesheets/decidim/_header.scss
+++ b/decidim-core/app/packs/stylesheets/decidim/_header.scss
@@ -334,10 +334,6 @@ header {
       &__dropdown-trigger {
         @apply flex items-center justify-between text-white;
 
-        span {
-          @apply flex flex-wrap md:flex-nowrap gap-x-2.5 overflow-hidden text-white;
-        }
-
         svg {
           @apply w-6 h-6 fill-current;
         }
diff --git a/decidim-core/app/views/layouts/decidim/header/_menu_breadcrumb_mobile_tablet.html.erb b/decidim-core/app/views/layouts/decidim/header/_menu_breadcrumb_mobile_tablet.html.erb
index c17238f36969c..4890fdfbc41fb 100644
--- a/decidim-core/app/views/layouts/decidim/header/_menu_breadcrumb_mobile_tablet.html.erb
+++ b/decidim-core/app/views/layouts/decidim/header/_menu_breadcrumb_mobile_tablet.html.erb
@@ -1,12 +1,12 @@
 <% dropdown_item = breadcrumb_items.select { |item| item[:dropdown_cell].present? }.last %>
 <div class="menu-bar__breadcrumb-mobile__dropdown-trigger">
-  <span>
-    <% breadcrumb_items.last(2).each_with_index do |item, i| %>
-      <% item_label = decidim_escape_translated(item[:label]).html_safe %>
-      <% if i.positive? %>
+  <span class="inline-block w-full overflow-hidden text-ellipsis align-middle">
+    <% breadcrumb_items.last(2).each_with_index do |item, idx| %>
+      <% item_label = decidim_escape_translated(item[:label]) %>
+      <% if idx.positive? %>
         <span>/</span>
       <% end %>
-      <span class="cursor-pointer <%= "truncate" if i.positive? %>" <%== 'aria-current="page"' if item[:active] %>>
+      <span class="cursor-pointer truncate" <%== 'aria-current="page"' if item[:active] %>>
         <% if item[:url].present? && !is_active_link?(item[:url], :exclusive) %>
           <%= link_to(item_label, item[:url]) %>
         <% else %>

From cf6d0ce198b9a28ac977b4fdb65b1ccb11217006 Mon Sep 17 00:00:00 2001
From: Renato <renato@octree.ch>
Date: Thu, 6 Mar 2025 10:35:24 -0300
Subject: [PATCH 5/7] fix: stylelint for _header.scss

---
 decidim-core/app/packs/stylesheets/decidim/_header.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/decidim-core/app/packs/stylesheets/decidim/_header.scss b/decidim-core/app/packs/stylesheets/decidim/_header.scss
index b4d3cbff288de..b53d9567d795a 100644
--- a/decidim-core/app/packs/stylesheets/decidim/_header.scss
+++ b/decidim-core/app/packs/stylesheets/decidim/_header.scss
@@ -408,20 +408,20 @@ header {
 
           > * {
             @apply py-3 md:py-3.5 border-b last:border-0 border-gray-3;
-  
+
             /* since the grid has 2 columns, remove the border for these last 2 columns */
             &:nth-last-child(-n + 2) {
               @apply md:border-0;
             }
           }
-  
+
           a {
             @apply flex items-center justify-start gap-1 font-semibold text-lg text-secondary;
-  
+
             span {
               @apply min-w-0 truncate;
             }
-  
+
             svg {
               @apply flex-none fill-current;
             }

From 7dc923f87efe6fe57d12292ec75bf489d164ef36 Mon Sep 17 00:00:00 2001
From: Renato <renato@octree.ch>
Date: Wed, 12 Mar 2025 12:39:24 -0300
Subject: [PATCH 6/7] fix: update spec for initiative due to CSS class change

---
 decidim-initiatives/spec/system/initiative_types_spec.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/decidim-initiatives/spec/system/initiative_types_spec.rb b/decidim-initiatives/spec/system/initiative_types_spec.rb
index fbe58cbc0a549..0ecd93d52e2e1 100644
--- a/decidim-initiatives/spec/system/initiative_types_spec.rb
+++ b/decidim-initiatives/spec/system/initiative_types_spec.rb
@@ -76,7 +76,7 @@
             visit decidim_initiatives.initiatives_path
 
             find_by_id("main-dropdown-summary").hover
-            within ".menu-bar__main-dropdown__menu" do
+            within ".menu-bar__dropdown-menu" do
               expect(page).to have_content("Initiatives")
               click_on "Initiatives"
             end

From f5d1642d8b4692510fd62f53a4b05eeae07dce32 Mon Sep 17 00:00:00 2001
From: Renato <renato@octree.ch>
Date: Wed, 30 Apr 2025 12:07:38 -0300
Subject: [PATCH 7/7] fix .erb_lint.yml remove text-ellipsis #14242

---
 .erb_lint.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.erb_lint.yml b/.erb_lint.yml
index 0295c07536ecf..c834bd806cad1 100644
--- a/.erb_lint.yml
+++ b/.erb_lint.yml
@@ -1859,7 +1859,6 @@ linters:
           - tech-info
           - tech-info--text-left
           - text-compact
-          - text-ellipsis
           - text-highlight
           - text-info
           - text-justify