fix: document email in timeline (#15592)

cypress/integration/timeline_email.js

@@ -19,7 +19,7 @@ context('Timeline Email', () => {
 		cy.get('.list-row > .level-left > .list-subject').eq(0).click();
 
 		//Creating a new email
-		cy.get('.timeline-actions > .btn').click();
+		cy.get('.timeline-actions > .timeline-item > .action-buttons > .action-btn').click();
 		cy.fill_field('recipients', 'test@example.com', 'MultiSelect');
 		cy.get('.modal.show > .modal-dialog > .modal-content > .modal-body > :nth-child(1) > .form-layout > .form-page > :nth-child(3) > .section-body > .form-column > form > [data-fieldtype="Text Editor"] > .form-group > .control-input-wrapper > .control-input > .ql-container > .ql-editor').type('Test Mail');
 
@@ -57,11 +57,11 @@ context('Timeline Email', () => {
 		cy.wait(500);
 
 		//To check if the discard button functionality in email is working correctly
-		cy.get('.timeline-actions > .btn').click();
+		cy.get('.timeline-actions > .timeline-item > .action-buttons > .action-btn').click();
 		cy.fill_field('recipients', 'test@example.com', 'MultiSelect');
 		cy.get('.modal-footer > .standard-actions > .btn-secondary').contains('Discard').click();
 		cy.wait(500);
-		cy.get('.timeline-actions > .btn').click();
+		cy.get('.timeline-actions > .timeline-item > .action-buttons > .action-btn').click();
 		cy.wait(500);
 		cy.get_field('recipients', 'MultiSelect').should('have.text', '');
 		cy.get('.modal-header:visible > .modal-actions > .btn-modal-close > .icon').click();

frappe/public/js/frappe/form/footer/base_timeline.js

@@ -12,8 +12,11 @@ class BaseTimeline {
 		this.wrapper = this.timeline_wrapper;
 		this.timeline_items_wrapper = $(`<div class="timeline-items">`);
 		this.timeline_actions_wrapper = $(`
-			<div class="timeline-actions">
-				<div class="timeline-dot"></div>
+			<div class="timeline-items timeline-actions">
+				<div class="timeline-item">
+					<div class="timeline-dot"></div>
+					<div class="timeline-content action-buttons"></div>
+				</div>
 			</div>
 		`);
 
@@ -37,7 +40,7 @@ class BaseTimeline {
 			${label}
 		</button>`);
 		action_btn.click(action);
-		this.timeline_actions_wrapper.append(action_btn);
+		this.timeline_actions_wrapper.find('.action-buttons').append(action_btn);
 		return action_btn;
 	}
 

frappe/public/js/frappe/form/footer/form_timeline.js

@@ -77,12 +77,14 @@ class FormTimeline extends BaseTimeline {
 			const message = __("Add to this activity by mailing to {0}", [link.bold()]);
 
 			this.document_email_link_wrapper = $(`
-				<div class="document-email-link-container">
+				<div class="timeline-item">
 					<div class="timeline-dot"></div>
-					<span class="ellipsis">${message}</span>
+					<div class="timeline-content">
+						<span>${message}</span>
+					</div>
 				</div>
 			`);
-			this.timeline_wrapper.append(this.document_email_link_wrapper);
+			this.timeline_actions_wrapper.append(this.document_email_link_wrapper);
 
 			this.document_email_link_wrapper
 				.find('.document-email-link')

frappe/public/scss/desk/timeline.scss

@@ -57,35 +57,6 @@ $threshold: 34;
 			}
 		}
 	}
-	.timeline-actions {
-		display: inline-flex;
-		width: 100%;
-		margin-bottom: var(--timeline-item-bottom-margin);
-		padding: var(--padding-sm);
-		position: relative;
-		.action-btn {
-			margin-left: var(--margin-md);
-			display: flex;
-			align-items: center;
-			line-height: var(--text-xl);
-			.icon {
-				margin-right: var(--margin-xs);
-			}
-		}
-		.action-btn:first-of-type {
-			margin-left: var(--timeline-item-left-margin);
-		}
-	}
-	.document-email-link-container {
-		@extend .ellipsis;
-		position: relative;
-		padding: var(--padding-sm);
-		font-size: var(--text-sm);
-		margin-bottom: var(--timeline-item-bottom-margin);
-		span:first-of-type {
-			margin-left: var(--timeline-item-left-margin);
-		}
-	}
 	.timeline-item {
 		font-size: var(--text-md);
 		position: relative;
@@ -94,6 +65,23 @@ $threshold: 34;
 			color: var(--text-color);
 			font-weight: var(--text-bold);
 		}
+		.action-buttons {
+			display: inline-flex;
+			white-space: nowrap;
+			overflow: auto;
+			.action-btn {
+				margin-left: var(--margin-md);
+				display: flex;
+				align-items: center;
+				line-height: var(--text-xl);
+				.icon {
+					margin-right: var(--margin-xs);
+				}
+			}
+			.action-btn:first-of-type {
+				margin-left: 0;
+			}
+		}
 		.timeline-content {
 			max-width: var(--timeline-content-max-width);
 			padding: var(--padding-sm);