Project

General

Profile

Actions

Bug #103328

open

UX: CEs preview-text is linked but not fully clickable

Added by Ayke Halder 2 months ago. Updated 30 days ago.

Status:
Under Review
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2024-03-07
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
12
PHP Version:
Tags:
UX
Complexity:
easy
Is Regression:
No
Sprint Focus:

Description

In the BE there is some preview text for each content-element. Unfortunatelly the clickable area is non-continuous, which results in flickering on hover and missed clicks.

This behaviour can be reproduced in Firefox and also in Chrome.

Technical background

This can only be shown in Firefox Dev Tools. Chrome just shows a continous link-area, but also behaves like having a non-continuous link-area.

Suggested fix

Add padding-top and padding-bottom to the a element.


Files

typo3-be-edit-link-stutter.gif (184 KB) typo3-be-edit-link-stutter.gif Ayke Halder, 2024-03-07 17:55
typo3-be-edit-link.png (58.4 KB) typo3-be-edit-link.png Ayke Halder, 2024-03-07 18:01
typo3-be-edit-link-fixed.png (58.6 KB) typo3-be-edit-link-fixed.png Ayke Halder, 2024-03-07 18:04
clipboard-202403131124-1scin.png (35.2 KB) clipboard-202403131124-1scin.png Ayke Halder, 2024-03-13 10:24
clipboard-202403131125-dxowu.png (37.3 KB) clipboard-202403131125-dxowu.png Ayke Halder, 2024-03-13 10:25
Actions #1

Updated by Gerrit Code Review 2 months ago

  • Status changed from New to Under Review

Patch set 1 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/83317

Actions #2

Updated by Gerrit Code Review 2 months ago

Patch set 2 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/83317

Updated by Ayke Halder 2 months ago ยท Edited

There are multiple a-tags involved. We can not use display:inline-block here, as it totally breaks the positioning of elements.

<div class="element-preview-content">
    <a href="#">Test text<br>Test</a>
    <a href="#"><div class="preview-thumbnails" style="--preview-thumbnails-size: 64px"><div class="preview-thumbnails-element"><div class="preview-thumbnails-element-image"><img src="..."></div></div></div></a>
</div>

Example: original

Example: inline-block

Actions #4

Updated by Ayke Halder 30 days ago

  • Tags set to UX
Actions

Also available in: Atom PDF