diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.html
index ab30a0238c6..4edee3cdc4b 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.html
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.html
@@ -32,8 +32,10 @@
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.scss b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.scss
index 978c3108844..7ff968c4c09 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.scss
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.scss
@@ -28,6 +28,7 @@
::ng-deep {
.p-button {
+ max-width: 124px; // To avoid overflow on the more button
use {
color: $color-palette-primary;
}
@@ -55,10 +56,11 @@
::ng-deep {
.more-menu {
padding: $spacing-1;
+ max-width: 15.625rem; // To avoid overflow on the more menu
}
.p-submenu-header {
- border-bottom: 1px solid $color-palette-gray-300;
+ border-bottom: 0.0625rem solid $color-palette-gray-300;
}
}
}
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.spec.ts
index c65f5560f12..90bafee35f5 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.spec.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.spec.ts
@@ -384,6 +384,63 @@ describe('DotUveDeviceSelectorComponent', () => {
expect(menuList).toBeDefined();
});
});
+
+ describe('More button label', () => {
+ it('should show "more" as default label', () => {
+ // Simulate the default device and social media not being set
+ baseUVEState.device.set(DEFAULT_DEVICE);
+ baseUVEState.socialMedia.set(null);
+
+ baseUVEState.viewParams.set({
+ device: undefined,
+ orientation: undefined,
+ seo: undefined
+ });
+
+ spectator.detectChanges();
+ const moreButton = spectator.query('[data-testid="more-button"]');
+
+ expect(moreButton.textContent.trim()).toBe('more');
+ });
+
+ it('should show custom device name when selected', () => {
+ const customDevice = mockDotDevices[0];
+
+ // Simulate the custom device selection
+
+ baseUVEState.device.set(customDevice);
+ baseUVEState.socialMedia.set(null);
+
+ baseUVEState.viewParams.set({
+ device: customDevice.inode,
+ orientation: undefined,
+ seo: undefined
+ });
+
+ spectator.detectChanges();
+ const moreButton = spectator.query('[data-testid="more-button"]');
+
+ expect(moreButton.textContent.trim()).toBe(customDevice.name);
+ });
+
+ it('should show social media name when selected', () => {
+ // Simulate the social media selection
+ const socialMedia = 'Facebook';
+ baseUVEState.socialMedia.set(socialMedia);
+ baseUVEState.device.set(DEFAULT_DEVICE);
+
+ baseUVEState.viewParams.set({
+ device: undefined,
+ orientation: undefined,
+ seo: socialMedia
+ });
+
+ spectator.detectChanges();
+ const moreButton = spectator.query('[data-testid="more-button"]');
+
+ expect(moreButton.textContent.trim()).toBe(socialMedia);
+ });
+ });
});
afterEach(() => jest.clearAllMocks());
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.ts
index 0341eaf197a..4eda8cf86f8 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.ts
@@ -77,6 +77,18 @@ export class DotUveDeviceSelectorComponent implements OnInit {
return menu;
});
+ readonly $moreButtonLabel = computed(() => {
+ const DEFAULT_LABEL = 'more';
+
+ const customDevice = this.$devices().find(
+ (device) => !device._isDefault && device.inode === this.$currentDevice()?.inode
+ );
+
+ const label = customDevice?.name || this.$currentSocialMedia();
+
+ return label || DEFAULT_LABEL;
+ });
+
readonly activeMenuItemId = computed(() => {
const deviceInode = this.$currentDevice()?.inode;
const socialMedia = this.$currentSocialMedia();
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html
index c825d80e68a..d78bbc5e20f 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html
@@ -10,7 +10,7 @@
}
- @if (preview) {
+ @if (preview && !$socialMedia()) {