Details up chevron not quite vertically aligned in forced colors mode [#3377198]

Problem/Motivation

A pixel or two higher would look right.

Steps to reproduce

Check any accordion element for example - go to /admin/config/system/site-information

Proposed resolution

Add margin-top: -0.125rem; in .claro-details__summary::before

Remaining tasks

Review

User interface changes

Before/After

API changes

Data model changes

Release notes snippet

Comment	File	Size	Author
#11	Screenshot at Jan 19 12-42-09.png	148.15 KB	shweta__sharma
#11	Screenshot at Jan 19 12-41-17.png	199.51 KB	shweta__sharma
#7	after-applying-patch.png	5.41 KB	Vidushi Mehta
#7	before-applying-patch.png	5.55 KB	Vidushi Mehta
#6	Screenshot from 2023-08-16 18-01-20.png	3.79 KB	kostyashupenko
#6	3377198-6.patch	1.15 KB	kostyashupenko
#4	vertical-aligned-chevron.png	5.29 KB	Vidushi Mehta
#3	3377198 after patch.png	9.87 KB	Harish1688
#3	3377198-3.patch	1.17 KB	Harish1688
	Screen Shot 2023-07-26 at 1.03.13 PM.png	10.76 KB	bnjmnm

Issue fork drupal-3377198

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

1 hidden branch

3377198-details-up-chevron

changes, plain diff MR !6740

Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

26 July 2023 at 17:06

bnjmnm created an issue. See original summary.

Comment #2

Harish1688 commented 27 July 2023 at 05:25

looking for this issue..

Comment #3

Harish1688 commented 27 July 2023 at 07:36

Status:

Active

» Needs review

Status	File	Size
new	3377198-3.patch	1.17 KB
new	3377198 after patch.png	9.87 KB

Hi,

Reproduced the issue on local and created a patch for issue 'details up chevron not quite vertically aligned in forced color mode'. attached a image for reference.

Test Steps:
1. setup the Drupal 11.x and claro theme as backend theme=.
2. moved on path 'admin/config/system/site-information' and active the forced color in browser, and verified the issue (chevron not align vertically).
3. create 3377198-3.patch , Need Review.

After Patch:
issue image

Comment #4

Vidushi Mehta commented 27 July 2023 at 09:36

Status:

Needs review

» Reviewed & tested by the community

Status	File	Size
new	vertical-aligned-chevron.png	5.29 KB

Reviewed the patch, the chevron is vertically top aligned after patch.

Comment #5

longwave

he/him

English

commented 16 August 2023 at 09:28

Status:

Reviewed & tested by the community

» Needs work

+++ b/core/themes/claro/css/components/details.css
@@ -310,7 +310,7 @@ td .claro-details {
+    margin-top: calc(0.125rem / -1);

Why not just

margin-top: -0.125rem;

Side-by-side screenshots from before and after would help as well.

Comment #6

kostyashupenko

English

Omsk

commented 16 August 2023 at 12:04

Status:

Needs work

» Needs review

Status	File	Size
new	3377198-6.patch	1.15 KB
new	Screenshot from 2023-08-16 18-01-20.png	3.79 KB

details chevron

Comment #7

Vidushi Mehta commented 16 August 2023 at 13:48

Status	File	Size
new	before-applying-patch.png	5.55 KB
new	after-applying-patch.png	5.41 KB

I've reviewed the patch #6 but still find the alignment issue, Attaching the before and after screenshots for the same. I am keeping the status same as Needs review so that we'll have more reviews on this

Comment #8

kostyashupenko

English

Omsk

commented 17 August 2023 at 05:38

We don't need top alignment. It should be vertically centered

Comment #9

smustgrave commented 21 August 2023 at 13:35

Status:

Needs review

» Reviewed & tested by the community

Seems suggestion in #5 worked.

Comment #10

21 August 2023 at 14:30

Status:

Reviewed & tested by the community

» Needs work

The last submitted patch, 6: 3377198-6.patch, failed testing. View results

Comment #11

shweta__sharma commented 19 January 2024 at 07:20

Status	File	Size
new	Screenshot at Jan 19 12-41-17.png	199.51 KB
new	Screenshot at Jan 19 12-42-09.png	148.15 KB

Looks like this is already aligned I measured with a ruler and the arrow top and bottom height is 19px
See screenshots for reference.

Comment #12

bnjmnm

he/him

English

Ann Arbor, MI

commented 19 January 2024 at 17:29

@shweta__sharma Perhaps I'm misreading your images, but the issue specifies this is related the up-pointing chevron, and both screenshots you provided are examining the down-pointing one.

Comment #13

shweta__sharma commented 22 January 2024 at 05:41

Yes @bnjmnm You are correct I was checking only up-pointing chevron. Down-pointing chevron icon has a 1-2 point px issue.

Comment #14

shweta__sharma commented 22 January 2024 at 05:43

Issue summary:

View changes

Issue summary Updated. I don't think it has any pending work left. Based on #5 Moving status to RTBC now
Thanks

Comment #15

shweta__sharma commented 22 January 2024 at 05:43

Status:

Needs work

» Reviewed & tested by the community

Comment #16

nod_

French

Lille

commented 22 February 2024 at 10:47

Status:

Reviewed & tested by the community

» Needs work

can someone reup a path that applies or better yet a MR?

thx

Needs work

» Needs review

Comment #21

smustgrave commented 26 February 2024 at 14:53

Status:

Needs review

» Reviewed & tested by the community

Patch https://www.drupal.org/files/issues/2023-08-16/3377198-6.patch copied into the MR.

Comment #22

26 February 2024 at 20:50

nod_ committed c73225d6 on 11.x

Issue #3377198 by karanpagare, Harish1688, kostyashupenko, Vidushi Mehta...

Comment #23

26 February 2024 at 20:50

nod_ committed 95f98bda on 10.3.x

Issue #3377198 by karanpagare, Harish1688, kostyashupenko, Vidushi Mehta...

Comment #24

nod_

French

Lille

commented 26 February 2024 at 20:50

Status:

Reviewed & tested by the community

» Fixed

Comment #25

26 February 2024 at 20:51

nod_ closed merge request !6740

Comment #26

11 March 2024 at 20:54

Status:

Fixed

» Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.