Problem/Motivation

Filters are overlapping themselves (the radio is covering the text) at smaller screen sizes.

screenshot showing radios overlapping the text of the radio label

Steps to reproduce

Open the advanced filters of project browser. Shrink screen until issue appears.

Proposed resolution

Fix in CSS / media query.

CommentFileSizeAuthor
#9 AfterFixTablet.png195.71 KBdivya.sejekan
#9 AfterFixDesktop.png201.94 KBdivya.sejekan
#9 AfterFixMobile.png153.37 KBdivya.sejekan
#9 TabletViewIssue.mov1.45 MBdivya.sejekan
#9 AfterFIX.mov4.87 MBdivya.sejekan
Screenshot 2023-07-21 at 1.07.52 PM.png88.63 KBchrisfromredfin

Issue fork project_browser-3376203

Command icon Show commands

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

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

About issue forks

Comments

chrisfromredfin created an issue. See original summary.

chrisfromredfin’s picture

chrisfromredfin
he/him/his
Primary language English
Location Portland, Maine
commented
Related issues: +#3293899: Adjust the radio button design to the Drupal Design system
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Title: Small-screen UI for filters » Filter's checkbox labels look broken at smaller viewports
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Needs review

Fixed, and also did a good amount of refactoring to simplify the CSS.

mherchel opened merge request !398

chrisfromredfin’s picture

chrisfromredfin
he/him/his
Primary language English
Location Portland, Maine
commented
Issue tags: +core-mvp, +beta blocker, +User interface

marcoliver made their first commit to this issue’s fork.

marcoliver’s picture

marcoliver
he/him
Primary language German
Location Neuss, NRW, Germany
commented

I updated the MR against 1.0.x, since the styles were relocated from the Svelte component files into one global CSS file.

divya.sejekan’s picture

divya.sejekan commented
StatusFileSize
new AfterFIX.mov4.87 MB
new TabletViewIssue.mov1.45 MB
new AfterFixMobile.png153.37 KB
new AfterFixDesktop.png201.94 KB
new AfterFixTablet.png195.71 KB

The overlapping of the radio buttons is fixed verified in Drupalpod for Drupal 10 using MR!398. But in tablet the filters moves a bit when the accordion is expanded refer to the video attached - TabletViewIssue.mov.

Steps Followed:
1. Install drupal 10
2. Navigate to /admin/modules/browse , expand the filter option
3. Check in smaller resolutions.

For the issue in tablet and Error in MR keeping this in Need review state since the MR has some error

divya.sejekan’s picture

divya.sejekan commented
Status: Needs review » Needs work
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

@divya.sejekan great catch! However, I'm moving this to a followup, since this is a minor UX issue, and shouldn't block this core MVP issue.

Followup is at #3423490: Content shift when expanding filters accordion. I'm going to bring this back up to date, and set back to RTBC since no major changes.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs work » Reviewed & tested by the community

Brought back up to date and should be good to go!

chrisfromredfin’s picture

chrisfromredfin
he/him/his
Primary language English
Location Portland, Maine
commented
Status: Reviewed & tested by the community » Fixed

Tests passing, rebased, confirmed working in DrupalPod - I love it! Go gators.

lostcarpark’s picture

lostcarpark commented

This change has introduced a StyleLint error in GitLabCI:

css/pb.css
 678:3  ✖  Expected "margin-block-end" to come before "font-size"  order/properties-order
1 problem (1 error, 0 warnings)

We haven't made it mandatory for code quality tests to pass in GitLabCI yet.

I will open a follow-up issue.

Status: Fixed » Closed (fixed)

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