site-kit-wp icon indicating copy to clipboard operation
site-kit-wp copied to clipboard

Published 20 hours ago • verified publisher icon google

WP Consent API active tick is squashed at narrow tablet viewports.

Open techanvil opened this issue 1 year ago • 3 comments

Bug Description

The circle around the tick that indicates the WP Consent API is active is squashed at narrow tablet viewports.

Steps to reproduce

  1. Install and activate the WP Consent API and navigate to the Consent Mode settings.
  2. Set the viewport to a narrow tablet width e.g. 601px.
  3. See the circle around the tick is squashed and clipped as per the screenshot below.

Screenshots

image

Additional Context

  • PHP Version: any
  • OS: any
  • Browser: any
  • Plugin Version: pre-release 1.122.0
  • Device: any

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

  • The circle around the tick as described above should remain a proper circle at all viewport widths.

Implementation Brief

  • [x] Add min-width: 22px to the styling for the circle. Alternatively flex-basis might be appropriate to use here.

Test Coverage

  • No new tests needed.

QA Brief

  • Run through the steps to reproduce, and verify the tick is no longer squashed.

Changelog entry

  • Update Consent Mode settings element sizing for consistency across viewports.

techanvil avatar Mar 11 '24 17:03 techanvil

Great spot @techanvil! I should have noticed that.

wpdarren avatar Mar 13 '24 02:03 wpdarren

IB ✔️

eugene-manuilov avatar Mar 13 '24 16:03 eugene-manuilov

QA Update ✅

  • Tested on dev environment.
  • Verified that issue is resolve now and now on narrow tablet viewports WP consent API active tick is not appearing squashed.

Latest -

image

Development -

image

mohitwp avatar Mar 27 '24 11:03 mohitwp