From e78f76ec8a263aaa465888887bfcfaa56cecefd2 Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Thu, 1 Feb 2024 18:33:51 +0530
Subject: [PATCH] Add ellipse to long theme names

---
 .../LivePreview/SiteGenPreviewSelectableCard/index.js  | 10 ++++++++--
 .../SiteGenPreviewSelectableCard/stylesheet.scss       |  8 ++++++++
 .../components/SitegenEditorPatterns/stylesheet.scss   |  7 +++++++
 .../sitegen-theme-marker/sitegen-theme-marker.css      |  3 +++
 .../sitegen-theme-marker/sitegen-theme-marker.js       |  2 +-
 5 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js
index 1816c6157..ea686bdb7 100644
--- a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js
+++ b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js
@@ -93,14 +93,20 @@ const SiteGenPreviewSelectableCard = ( {
 						aria-label="Add to Wishlist"
 						className={ `${ className }__live-preview-container-buttons__button` }
 					>
-						<span>
+						<span
+							className={ `${ className }__live-preview-container-buttons__button__icon` }
+						>
 							{ isFavorite ? (
 								<FavouriteIconFilled />
 							) : (
 								<FavouriteIconStroked />
 							) }
 						</span>
-						<span>{ title }</span>
+						<span
+							className={ `${ className }__live-preview-container-buttons__button__title` }
+						>
+							{ title }
+						</span>
 					</div>
 					<div
 						role="button"
diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
index 6148fa1de..135f8b1f4 100644
--- a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
+++ b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
@@ -93,7 +93,15 @@
 				fill: var(--nfd-onboarding-primary);
 				cursor: pointer;
 				text-align: left;
+
+				&__title {
+					width: 200px;
+					text-overflow: ellipsis;
+					text-wrap: nowrap;
+					overflow: hidden;
+				}
 			}
+
 		}
 	}
 }
diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss
index ca8adf25d..268659a32 100644
--- a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss
+++ b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss
@@ -93,6 +93,13 @@
 							align-items: center;
 							color: #000;
 
+							&__title {
+								width: 200px;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								text-wrap: nowrap;
+							}
+
 							&__icon {
 								background-image: var(--sitegen-favorite);
 								height: 21px;
diff --git a/src/Scripts/sitegen-theme-marker/sitegen-theme-marker.css b/src/Scripts/sitegen-theme-marker/sitegen-theme-marker.css
index 6e382b961..348632920 100644
--- a/src/Scripts/sitegen-theme-marker/sitegen-theme-marker.css
+++ b/src/Scripts/sitegen-theme-marker/sitegen-theme-marker.css
@@ -21,4 +21,7 @@
 
 .nfd-onboarding-sitegen-theme-marker-title {
 	margin-left: 8px;
+	width: 120px;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
diff --git a/src/Scripts/sitegen-theme-marker/sitegen-theme-marker.js b/src/Scripts/sitegen-theme-marker/sitegen-theme-marker.js
index 01dd4e9b0..03dd6e95e 100644
--- a/src/Scripts/sitegen-theme-marker/sitegen-theme-marker.js
+++ b/src/Scripts/sitegen-theme-marker/sitegen-theme-marker.js
@@ -16,7 +16,7 @@ window.onload = function () {
                <path d="M6.85742 16L9.54834 8.24951H11.4551L14.1514 16H12.4434L11.8687 14.1201H9.13477L8.56006 16H6.85742ZM10.4561 9.79639L9.50537 12.9062H11.498L10.5527 9.79639H10.4561ZM14.9673 16V8.24951H16.5894V16H14.9673Z" fill="white"/>
                </svg>               
                ` +
-				`<span class="nfd-onboarding-sitegen-theme-marker-title">${ homepage.title }</span>`;
+				`<div class="nfd-onboarding-sitegen-theme-marker-title">${ homepage.title }</div>`;
 		}
 	} );
 };