[910, 933] Fix CS filter search & Show More / Show Less behavior on mobile#237
[910, 933] Fix CS filter search & Show More / Show Less behavior on mobile#237IhorMasechko merged 3 commits intomainfrom
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
| ||||||||||||||||||||||||
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.
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.