Automattic / Automattic/WP-Job-Manager

Optimize CSS to avoid clashing of generically named classes | Label class

Open
#1,404 1 comment 0 reactions 0 assignees View on GitHub
Enhancement
Dominant language
PHP
Stars
899
Forks
369
Avg merge
11h 37m
Merged PRs (30d)
12

Description

#### Steps to Reproduce
1. View text of any label elements
2. Notice width issue

#### What I Expected
Text should fill available width

#### What Happened Instead
.label width is set to 120px and makes labels look squished

#### WordPress / WP Job Manager Version
4.9.4 / 1.29.2

#### Browser / OS Version
Chrome / Windows 7

#### Screenshot / Video
![image](https://user-images.githubusercontent.com/22916154/37832042-734423e2-2e75-11e8-97ba-11a4018ef242.png)

#### Context / Source
Upon looking at the panel.css file that is a part of wp-job-manager, I noticed several classes that are named generic enough that they may clash with other site CSS. My recommendation is to give wp-job-manager styles more specificity to only effect intended areas or styles and not all of them. One option would even be as simple as a prefix to class names or something similar. I'm all for dry CSS and making it as simple as possible.

Contributor guide

Open the contributing guide

Research direction

Start with panel.css and reproduce the label width problem described in the issue on a WP Job Manager page. Review the generic selectors and their affected elements; the work is done when labels use the available width without unintended clashes with site CSS.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.