Styles for the knowledge base index's chips and article list - #35
Merged
Merged
Conversation
For phpbb/phpbb-website-private#20, which replaces the knowledge base's nine category tabs with chips and its table with a list: - .kb-categories: rounded chips with an article count. They wrap on a wide screen and scroll sideways in one row at 700px and below. The current one is filled like the docs' active tab (#505C65), and one for a category without articles is dashed and grey. - .kb-listing-heading and .kb-articles: a light heading and rows split by a hairline, with title, description and an author and date line, so nothing is hidden on a phone. - On narrow screens the docs' intro text is left-aligned rather than justified, which left wide gaps between words. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
From review: the text of an empty category's chip (#747A7F on white, 4.35:1) and the count on the current chip (4.22:1) were below AA for their size; they are #626D76 and a solid #3F4950 badge now. Adds .kb-visually-hidden for the "articles" after a chip's count, and makes the External link badge 1.1em like the meta line. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
There was a problem hiding this comment.
🟡 Changes recommended
Four moderate CSS specificity issues remain unresolved.
Get a fresh assessment by requesting another Copilot review.
Pull request overview
Adds responsive styling for the knowledge-base index, including category chips and complete article listings on narrow screens.
Changes:
- Adds category chips with counts, active/empty states, and accessibility styling.
- Adds article rows, metadata, headings, and external-link badges.
- Adds mobile chip scrolling and left-aligned support-document text.
File summaries
| File | Summary | Review findings |
|---|---|---|
css/support_docs.css |
Implements all knowledge-base listing and responsive styles. | Four unresolved moderate specificity issues: chip labels remain underlined (line 1074, 3 votes); article rows retain a left margin (line 1142, 2 votes); metadata retains the larger paragraph size (line 1185, 1 vote); and the chip container remains indented (line 1056, 1 vote). |
Review details
Suppressed comments (2)
css/support_docs.css:1185
- Because
#main pinwebsite.css:141-145has ID specificity, it overrides this rule'sfont-size: 1.1emwhen the metadata is rendered as the expected paragraph inside#main; the author/date line therefore stays at the larger paragraph size. Scope the metadata selector to#mainso the reduced meta size is applied.
.kb-articles .kb-meta {
css/support_docs.css:1056
website.css:162-166applies#main ul { margin-left: 2em; }, whose ID specificity outranks.kb-categories ul; therefore the chips retain a 2em left indent instead of the declared zero left margin when the new page is inside#main. Scope the selector to#main(or otherwise raise its specificity) so the chip container reset is applied.
.kb-categories ul {
- Files reviewed: 1/1 changed files
- Comments generated: 2
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| color: #105289; | ||
| font-size: 1.2em; | ||
| line-height: 1.4; | ||
| text-decoration: none; |
Comment on lines
+1142
to
+1146
| .kb-articles { | ||
| list-style: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Styles for the knowledge base index moving to the website (phpbb/phpbb-website-private#20, branch
issue-20/kb-listings).The old listing had nine category tabs that wrapped into ragged rows on a phone. Its table also dropped the author and date column altogether at narrow widths. The new page replaces both, keeping the docs' look.
What this adds to
css/support_docs.css.kb-categories: rounded category chips with an article count.#505C65, like the docs' active tab..kb-listing-headingand.kb-articles: a light heading ("4 articles in Styles for phpBB 3.3") and rows split by a hairline. Each row has the title, the description and an author · date line, so nothing is hidden on a phone..kb-external: a small badge for a redirect to another page..kb-visually-hidden: screen-reader-only text. It lets a chip read as "Styles, 4 articles"..support_docs #main pis left-aligned instead of justified, which left wide gaps between words. This also applies to the User Guide and the old site's docs pages, which share the stylesheet.All new selectors are
kb-*classes that only the new page uses. I greppedwebsite/and this repo: nothing else uses them.Checked
After this merges,
composer update phpbb/website-assetsgoes into the #20 branch.🤖 Generated with Claude Code