Page MenuHomePhorge

Incorrectly cropped box-shadow CSS around a.button:focus
Open, Needs TriagePublic

Description

Steps to reproduce and actual outcome:

  1. Firefox 116.0
  2. Don't be a member of the "Blessed Committers" project in we.phorge.it
  3. Go to https://we.phorge.it/L1
  4. Click on the Manage button
  5. Close the popup with Esc
  6. Move the mouse pointer away from the button

Screenshot from 2023-08-03 14-15-52.png (108×303 px, 4 KB)
-

Or:

  1. Go to https://we.phorge.it/maniphest/task/edit/form/2/
  2. Click on the Configure Form v button

Screenshot from 2023-08-03 14-20-48.png (125×343 px, 5 KB)

Expected outcome:
If that "glowing" effect is really needed, it should be shown on all four sides of a button, instead of three sides only.
Or just remove that effect completely?

Additional information:

Defined in webroot/rsrc/css/phui/button/phui-button.css via

button:focus,
a.button:focus {
  outline: 0;
  box-shadow: 0 0 2pt 2pt rgba(82, 168, 236, 0.7);
}

On https://we.phorge.it/maniphest/task/edit/form/2/ this problem gets fixed by removing margin-top: 0 from

.phui-box-white-config .phui-header-action-links .button {
  margin-top: 0;
  margin-bottom: 0;
}

On https://we.phorge.it/L2 it's more complicated.

Event Timeline

aklapper renamed this task from Incorrectly cropped "glow effect" CSS around some UI buttons to Incorrectly cropped box-shadow CSS around a.button:focus.Mar 1 2024, 13:39
aklapper updated the task description. (Show Details)