-
Notifications
You must be signed in to change notification settings - Fork 1
[910, 933] Fix CS filter search & Show More / Show Less behavior on mobile #237
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
WalkthroughThis PR modifies the case-studies filter modal and related tag UI. filterModal.js now temporarily removes layout constraints on the tagsFilter element when opening (sets max-height to none and overflow to visible) and restores those styles on close. SCSS updates allow unlimited tags-filter height, increase expanded category max-height to 5000px, and raise modal bottom padding. initCaseStudiesFilterHandler.js and searchInputHandler.js were refactored to operate on arrays of tag items and to compute visible counts for show-more behavior. Possibly related PRs
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 📜 Recent review detailsConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (2)
🧰 Additional context used🧠 Learnings (3)📓 Common learnings📚 Learning: 2025-08-29T09:36:15.180ZApplied to files:
📚 Learning: 2025-08-13T15:03:43.822ZApplied to files:
🧬 Code graph analysis (2)website/modules/asset/ui/src/initCaseStudiesFilterHandler.js (1)
website/modules/asset/ui/src/searchInputHandler.js (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
🔇 Additional comments (5)
✏️ Tip: You can disable this entire section by setting Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🔍 Vulnerabilities of
|
| digest | sha256:a255b1062611bc885c57913571e687c22acfcf60a865609f34b4b7419f613f04 |
| vulnerabilities | |
| platform | linux/amd64 |
| size | 291 MB |
| packages | 985 |
📦 Base Image node:23-alpine
| also known as |
|
| digest | sha256:b9d38d589853406ff0d4364f21969840c3e0397087643aef8eede40edbb6c7cd |
| vulnerabilities |
Description
| ||||||||||||||||||||||||
Description
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
- Fix button visibility when expanding filters with many items - Hide show less button when search results have 5 or fewer items - Show show less button when search results have more than 5 items - Reset button state correctly when search input is cleared - Fix collapse/expand to show correct number of items during search
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@website/modules/asset/ui/src/initCaseStudiesFilterHandler.js`:
- Around line 203-208: The code assumes button.closest('.filter-content') always
returns an element; add a null-check after computing filterContent in
initCaseStudiesFilterHandler (or the surrounding handler) so that if
filterContent is null you bail out (e.g., return) before calling
filterContent.querySelector() or querySelectorAll(); this protects the
subsequent references to searchInput, isSearchActive, textElement and allItems
from throwing a TypeError.
In `@website/modules/asset/ui/src/searchInputHandler.js`:
- Around line 106-115: Inside the else branch that handles showMoreButton
visibility (where visibleCount > defaultVisibleCount is already true), remove
the redundant inner if condition checking visibleCount > defaultVisibleCount and
directly query and update the button: find
showMoreButton.querySelector('.tags__show-more--text') into textElement, if
textElement exists add the 'tags__show-more--expanded' class to showMoreButton
and set textElement.textContent = 'Show less' (affecting the logic in
searchInputHandler.js around showMoreButton, textElement, visibleCount,
defaultVisibleCount).
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
website/modules/asset/ui/src/initCaseStudiesFilterHandler.jswebsite/modules/asset/ui/src/scss/_cases.scsswebsite/modules/asset/ui/src/searchInputHandler.jswebsite/modules/testimonials/index.js
🧰 Additional context used
🧠 Learnings (7)
📓 Common learnings
Learnt from: Anton-88
Repo: speedandfunction/website PR: 223
File: website/modules/asset/ui/src/scss/_cases.scss:1289-1296
Timestamp: 2025-08-29T09:36:15.180Z
Learning: In website/modules/asset/ui/src/scss/_cases.scss, the user Anton-88 prefers to keep position: sticky for the .filter-modal__content despite potential technical concerns, citing the complicated modal structure as the reason.
📚 Learning: 2025-05-14T09:44:56.398Z
Learnt from: yuramax
Repo: speedandfunction/website PR: 84
File: website/modules/case-studies-page/views/index.html:87-90
Timestamp: 2025-05-14T09:44:56.398Z
Learning: For the Case Study cards in website/modules/case-studies-page/views/index.html, the "type" and "industry" fields are temporarily hard-coded with values "Mobile Development" and "Manufacturing" as placeholders. These will be replaced with dynamic data ({{ article.type }} and {{ article.industry }}) in a future task.
Applied to files:
website/modules/testimonials/index.js
📚 Learning: 2025-08-29T09:36:15.180Z
Learnt from: Anton-88
Repo: speedandfunction/website PR: 223
File: website/modules/asset/ui/src/scss/_cases.scss:1289-1296
Timestamp: 2025-08-29T09:36:15.180Z
Learning: In website/modules/asset/ui/src/scss/_cases.scss, the user Anton-88 prefers to keep position: sticky for the .filter-modal__content despite potential technical concerns, citing the complicated modal structure as the reason.
Applied to files:
website/modules/asset/ui/src/scss/_cases.scss
📚 Learning: 2025-12-05T10:45:00.494Z
Learnt from: IhorMasechko
Repo: speedandfunction/website PR: 226
File: website/modules/asset/ui/src/scss/_cases.scss:1399-1414
Timestamp: 2025-12-05T10:45:00.494Z
Learning: In website/modules/asset/ui/src/scss/_cases.scss, the .cs_partnership element intentionally uses min-width: 430px as per specific task requirements, even though this may cause horizontal overflow on small mobile devices (320px-375px viewports). This is an intentional design decision.
Applied to files:
website/modules/asset/ui/src/scss/_cases.scss
📚 Learning: 2025-05-29T07:16:52.843Z
Learnt from: IhorMasechko
Repo: speedandfunction/website PR: 132
File: website/modules/asset/ui/src/scss/_not-found.scss:52-64
Timestamp: 2025-05-29T07:16:52.843Z
Learning: In website/modules/asset/ui/src/scss/_not-found.scss, the .two-buttons container with flex-direction: row and child .sf-button elements having width: 100% does not cause overflow issues and renders correctly, despite theoretical expectations.
Applied to files:
website/modules/asset/ui/src/scss/_cases.scss
📚 Learning: 2025-08-13T15:03:43.822Z
Learnt from: CR
Repo: speedandfunction/website PR: 0
File: .cursor/rules/code-conventions.mdc:0-0
Timestamp: 2025-08-13T15:03:43.822Z
Learning: Applies to modules/asset/ui/src/index.js : modules/asset/ui/src/index.js: relaxed function lines and function style rules
Applied to files:
website/modules/asset/ui/src/scss/_cases.scss
📚 Learning: 2025-07-02T08:15:36.173Z
Learnt from: yuramax
Repo: speedandfunction/website PR: 191
File: website/modules/asset/ui/src/scss/_leadership-team.scss:213-216
Timestamp: 2025-07-02T08:15:36.173Z
Learning: In website/modules/asset/ui/src/scss/_leadership-team.scss, the `.leader-bio` element intentionally uses `overflow-y: hidden` at the `breakpoint-extra-large` level to completely remove scrollbars on desktop devices, while maintaining `overflow-y: auto` at the `breakpoint-large` level for tablets. This design decision relies on content managers controlling bio text length to prevent overflow on desktop, ensuring a clean scrollbar-free experience on larger screens.
Applied to files:
website/modules/asset/ui/src/scss/_cases.scss
🧬 Code graph analysis (2)
website/modules/asset/ui/src/searchInputHandler.js (2)
website/modules/asset/ui/src/index.js (1)
container(31-31)website/modules/asset/ui/src/initCaseStudiesFilterHandler.js (1)
textElement(207-207)
website/modules/asset/ui/src/initCaseStudiesFilterHandler.js (1)
website/modules/asset/ui/src/searchInputHandler.js (3)
textElement(110-110)textElement(117-117)isSearchActive(147-147)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: unit-tests
- GitHub Check: security-scan
- GitHub Check: e2e-tests
🔇 Additional comments (4)
website/modules/asset/ui/src/scss/_cases.scss (1)
201-201: No issues identified.The max-height increase to 5000px is a standard approach for CSS transition animations on expandable content.
website/modules/testimonials/index.js (1)
109-112: No issues identified.Standard Apostrophe CMS column definition for displaying the related case study title.
website/modules/asset/ui/src/initCaseStudiesFilterHandler.js (1)
125-152: No issues identified.The renamed parameter and added else branch correctly handle both showing and hiding items during collapse animation.
website/modules/asset/ui/src/searchInputHandler.js (1)
116-127: No issues identified.The reset logic correctly handles clearing the search state by removing the expanded class and setting text back to "Show more".
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
Description:
This PR fixes incorrect Show More / Show Less behavior and a mobile filter search issue in the Case Studies (CS) filters.
What was fixed:
Ensured Show Less remains visible after expanding the filter list and allows collapsing back to 5 items.
Restored correct toggle behavior between Show More and Show Less.
Improved behavior during search:
Hide Show Less when filtered results ≤ 5 items.
Keep Show Less visible when filtered results > 5 items.
Fixed a mobile issue where the filter menu collapsed when interacting with the search field, making other CS filters unusable.
Result:
CS filters now behave correctly on mobile, allowing smooth expansion, collapsing, and searching without unexpected menu closure.
Fixes Case Studies filter behavior on mobile: correct Show More/Show Less toggle and search interactions—Show Less hidden when filtered results ≤5, shown when >5; reset button state when search cleared; ensure collapse/expand shows correct item counts during search; prevent mobile filter menu closing when interacting with search. Also adjust modal/tags layout to remove max-height and allow visible overflow, increase padding.