SEO - Small UX fixes

[damen-dotcms]

Parent Issue

• Red: The icons are aligned in the center of the item

• Purple: We are missing a scroll bar

• Blue: We are missing a divider line between the default and user devices.

• Green: The Twitter Title changed.

Problem Statement

Steps to Reproduce

Acceptance Criteria

• Red: The icons should be aligned with the title of each item, please make sure that even the Social Media titles are aligned (Please also check if the size of the icon is the same as the design)

• Purple: Add a scrollbar in each of the device columns.

• Blue: Add a divider line between the default and user devices.

• Green: The Twitter should be changed to:
  X (Formerly Twitter)

dotCMS Version

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

Assumptions & Initiation Needs

Quality Assurance Notes & Workarounds

Sub-Tasks & Estimates

---

Reported by: Melissa Rojas Rodríguez (melissa.rojas@dotcms.com)

Source URL: https://dotcms-qa-master.dotcms.site/dotAdmin/#/edit-page/content?url=%2Fblog%2Fpost%2Ffrench-polynesia-everything-you-need-to-know&host_id=48190c8c-42c4-46af-8d1a-0cd5db894797&language_id=1&device_inode=

Issue details: Open in Marker.io

Device type	desktop
Browser	Chrome 117.0.0.0
Screen Size	1512 x 982
OS	OS X 13.5.2
Viewport Size	1512 x 913
Zoom Level	100%
Pixel Ratio	@​2x

[dcolina]

Internal QA: Needs work.

@manuelrojas I am not sure whether there is a bug, but I have some doubt about the scroll behavior of the Devices panel.

Following the acceptance criteria I think it should be two scroll bars and it seems to have only one.

Screen.Recording.2023-10-13.at.11.23.07.mov

[dcolina]

Internal QA: PASSED.

[josemejias11]

Approved: Tested on master_3c41b76_SNAPSHOT, Docker, macOS 13.0, FF v113.0