Varkopat/refactor/661/refactor clancard component to match newest figma design - #674
Open
Varkopat wants to merge 11 commits into
Open
Conversation
…Figma design specifications
…ning with latest design specifications and improving layout for clan information display
…izes and media queries for improved responsiveness
…and align with Figma design, improving information display and visual consistency. Updated MobileCard.module.scss so mobile clan cards now: - allow ClanInfoBadges to wrap and use full width - keep badge icons smaller and better spaced - show ClanInfoStats in a flexible column instead of a cramped block - let ClanInfoValue wrap cleanly on small screens - render ClanLabels in a responsive row with smaller, pill-style chips Validation: Checked the updated stylesheet for errors: none found.
…ss and align with Figma design, improving visual consistency and information display.
… styles for improved layout and responsiveness
- Fix ClanCard layout flow and height constraints across mobile and tablet viewports - Constrain image container max-height to stop clan logos from overlapping titles - Apply primary color accent to clan titles with ellipsis text-overflow truncation - Restructure stats and badge rows to stack vertically on narrow screens
…styles for better responsiveness
…le so the title uses var(--primary-color) reliably. Validation: checked the diff and selector location. - Refactored media queries in MobileCard ClanCard. - Polished the UI so it better matches Figma designs.
Varkopat
requested review from
Rutjake,
Skoivumaki,
leolabdev and
patinen
as code owners
July 27, 2026 15:08
5 tasks
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
1 participant
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.
📄 Pull Request Overview
Closes #661
🔧 Changes Made
Refactored the clan card UI to better align with the latest Figma design, including updated title styling, metadata positioning, and improved card spacing for a more polished presentation.
Improved responsiveness and layout consistency across mobile and modular card variants by adjusting image container sizing, media queries, and related styles for better behavior across breakpoints.
Refactoring / Cleanup
Simplified and consolidated clan card-related styling in the shared mobile and modular card components to make the implementation easier to maintain and more consistent.
✅ Checklist Before Submission
console.log()or other debugging statements are left.📝 Additional Information
I don't know if this is an already known issue, but for some reason the clans page doesn't load on the build server. On dev server it works fine.