Change admin edit tools into a disclosure.

Less disruptive, cleaner.

src/css/mc-admin.css

@@ -1,43 +1,53 @@
+.mc-toggle-edit {
+	all: unset;
+	height: 32px;
+	width: 32px;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba( 0,0,0,.04 );
+	color: #333;
+}
+
+.mc-toggle-edit[aria-expanded=true] {
+	background: rgba( 0,0,0,.9 );
+	color: #fff;
+}
+
+.mc-event .mc_edit_links,
 .my-calendar-modal .mc_edit_links,
-.mc-main .mc_edit_links,
-.mc-event .mc_edit_links {
-	font-size: 14px;
-	font-family: sans-serif;
-	line-height: 1.62;
-	margin: 1.5rem 0 .5rem 0 !important;
-	clear: both;
-	background: var(--primary-light);
-	border-radius: 10px;
-	border: 1px solid var(--highlight-dark);
-	padding: 0 8px;
+.mc-main .details .mc_edit_links {
+	position: relative;
 }
 
-.mc-event .mc_edit_links li,
-.my-calendar-modal .mc_edit_links li,
-.mc-main .details .mc_edit_links li,
 .mc-event .mc_edit_links ul,
 .my-calendar-modal .mc_edit_links ul,
 .mc-main .details .mc_edit_links ul {
-	list-style: none;
-	margin: 4px 0;
-	padding: 0;
-	display: flex;
-	gap: 8px;
-}
-
-.mc-main .my-calendar-cards .mc_edit_links {
-	border: none;
+	display: none;
 	position: absolute;
+	background: #fff;
+	border: 1px solid;
+	padding: 1rem;
 	bottom: 0;
-	padding-bottom: 0;
-	margin-bottom: 0;
+	left: 34px;
+	list-style: none;
+	z-index: 2;
+	box-shadow: 3px 3px 1px #ccc;
+	padding: 4px;
+	margin: 0;
 }
 
-.mc-main .my-calendar-cards .card-event .details {
-	padding-bottom: 3rem;
+.mc-event .mc_edit_links ul a,
+.my-calendar-modal .mc_edit_links ul a,
+.mc-main .details .mc_edit_links ul a {
+	padding: 4px;
+	font-size: 1rem;
+	display: block;
 }
 
-.mc-main .mc_edit_links a {
-	color: var(--primary-dark);
-	display: inline !important;
+.mc-event .mc_edit_links ul a:hover,
+.my-calendar-modal .mc_edit_links ul a:hover,
+.mc-main .details .mc_edit_links ul a:hover {
+	background: rgba( 0,0,0,.04 );
 }

src/js/mcjs.js

@@ -119,6 +119,7 @@
 
 	if ( 'true' === my_calendar.ajax ) {
 		mc_render_buttons();
+		my_calendar_edit_toggles();
 		// Prevents spacebar from scrolling the page on links with button role.
 		$(document).on( 'keydown', '.my-calendar-header a:not(.mc-print a, .mc-export a), .my-calendar-footer a:not(.mc-print a, .mc-export a)', function(e) {
 			if ( 32 === e.which ) {
@@ -230,6 +231,7 @@
 						$('.mini .has-events').children().not('.mc-date-container').hide();
 					}
 					mc_render_buttons();
+					my_calendar_edit_toggles();
 					// All views.
 					$( '#' + targetId ).trigger( 'focus' );
 					let refText = $( '#mc_head_' + ref ).text();
@@ -316,6 +318,25 @@
 
 	$('.mc-main a[target=_blank]').append( ' <span class="dashicons dashicons-external" aria-hidden="true"></span><span class="screen-reader-text"> ' + my_calendar.newWindow + '</span>' );
 
+	function my_calendar_edit_toggles() {
+		const adminToggles = document.querySelectorAll( '.mc-toggle-edit' );
+		if ( adminToggles ) {
+			adminToggles.forEach( (el) => {
+				let controls = el.getAttribute( 'aria-controls' );
+				let controlled = document.querySelector( '#' + controls );
+				el.addEventListener( 'click', function(e) {
+					let expanded = el.getAttribute( 'aria-expanded' );
+					if ( 'true' === expanded ) {
+						controlled.style.display = 'none';
+						el.setAttribute( 'aria-expanded', 'false' );
+					} else {
+						controlled.style.display = 'block';
+						el.setAttribute( 'aria-expanded', 'true' );
+					}
+				});
+			});
+		}
+	}
 	/**
 	 * Map ARIA attributes to My Calendar table so responsive view doesn't break table relationships.
 	 */

src/my-calendar-output.php

@@ -958,7 +958,7 @@ function mc_edit_panel( $html, $event, $type, $time ) {
 		$recurs    = str_split( $event->event_recur, 1 );
 		$recur     = $recurs[0];
 		$referer   = urlencode( mc_get_current_url() );
-		$edit      = "	<div class='mc_edit_links'><ul>";
+		$edit      = "	<div class='mc_edit_links'><button type='button' class='mc-toggle-edit' aria-expanded='false' aria-controls='mc-edit-$mc_id' aria-label='" . __( 'Edit', 'my-calendar' ) . "'><span class='dashicons dashicons-edit' aria-hidden='true'></span></button><ul id='mc-edit-$mc_id'>";
 		/**
 		 * Filter the permission required to view admin links on frontend when using Pro. Default 'manage_options'.
 		 *