From 3f96765128ef188ee51fc91c25c9a47798ff4262 Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@sphericalcowgroup.com>
Date: Thu, 27 Jul 2023 14:09:17 -0400
Subject: [PATCH] Refine top-links responsive behavior to remain in a dropdown
 menu when more than three actions are present. (CFM-301)

---
 app/templates/element/menuAction.php |  4 +++-
 app/webroot/css/co-responsive.css    | 17 +++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/templates/element/menuAction.php b/app/templates/element/menuAction.php
index b6d79a04a..b70d01337 100644
--- a/app/templates/element/menuAction.php
+++ b/app/templates/element/menuAction.php
@@ -27,7 +27,9 @@
 
 $actionsCount = count($vv_actions);
 $actionsCountClass = $actionsCount > 0 ? ' actions-count-' . $actionsCount : '';
-$actionsMenuClass = (!empty($vv_actions_class) ? $vv_actions_class : 'field-actions-menu') . ' dropdown dropleft' . $actionsCountClass;
+$actionsExpandedClass = ($actionsCount > 0 && $actionsCount < 4) ? ' actions-expanded' : '';
+$actionsMenuClass = (!empty($vv_actions_class) ? $vv_actions_class : 'field-actions-menu') 
+  . ' dropdown dropleft' . $actionsCountClass . $actionsExpandedClass;
 $actionsMenuUid = md5($vv_attr_id);
 $actionsType = !empty($vv_actions_type) ? $vv_actions_type : 'row-actions';
 $actionsTitle = !empty($vv_actions_title) ? $vv_actions_title : '';
diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
index 4dd0791c2..3bccd3e82 100644
--- a/app/webroot/css/co-responsive.css
+++ b/app/webroot/css/co-responsive.css
@@ -350,15 +350,16 @@
     padding: 0;
   }
   /* EDIT / VIEW / INDEX ACTION TOP-LINKS MENU */
-  /* Convert the dropdown menus to be visible on wider screens.
-     XXX We will likely collapse the toplinks when there are many, but for now, expose them. */
+  /* Convert the dropdown menus to be visible on wider screens when .actions-expanded class exists. 
+     .action-expanded is set when there are fewer than four actions exposed. Otherwise, all links remain
+     in the gear dropdown menu. */
   .field-actions.top-links {
     align-self: end;
   }
-  .field-actions.top-links  .action-menu-toggle {
+  .field-actions.top-links .actions-expanded .action-menu-toggle {
     display: none;
   }
-  .field-actions.top-links  .dropdown-menu {
+  .field-actions.top-links .actions-expanded  .dropdown-menu {
     position: static;
     display: inline-block;
     min-width: 0;
@@ -367,17 +368,17 @@
     background-color: transparent;
     white-space: nowrap;
   }
-  .field-actions.top-links  .action-list-item {
+  .field-actions.top-links .actions-expanded  .action-list-item {
     display: inline-block;
   }
-  .field-actions.top-links  a.dropdown-item {
+  .field-actions.top-links .actions-expanded  a.dropdown-item {
     padding: 0 0.5em;
   }
-  #main .field-actions.top-links  a.dropdown-item:hover {
+  #main .field-actions.top-links .actions-expanded  a.dropdown-item:hover {
     color: var(--cmg-color-link);
     text-decoration: underline;
   }
-  .field-actions.top-links  a.dropdown-item:hover {
+  .field-actions.top-links .actions-expanded  a.dropdown-item:hover {
     background-color: transparent;
   }
   /* FOOTER */