Jarno/feature/298-responsive-flexbox-layout-for-clans-main-page

[Rutjake]

📄 Pull Request Overview

closes 298

🔧 Changes Made

Created flexboxes for the page layout (lng\clans\layout.tsx) and adjusted responsiveness and alignment in the CSS file (new file, ClanPageLayout.scss).

---

✅ Checklist Before Submission

• Functionality: I have tested my code, and it works as expected.

Responsiveness worked in the browser and the flexbox size was adjusted according to the page's main menu.

📝 Additional Information

Provide any additional context or information that reviewers may need to know:

• Screenshots: [Include any screenshots or videos if the changes affect the UI]

[Skoivumaki]

Build is failing because of a typo. import './ClanPageLayout.scss'; when it should be import './clanPageLayout.scss'; but change the file name to keep good practice: ClanPageLayout.scss
We dont store CSS inside [lng], code for layout should be stored inside pages layer and should only be imported in [lng]. (see Auth for example: [lng](helper)\auth\layout.tsx) We have a place to store layouts but since this layout is Clan specific I think this will do for now.

About FSD folder scheme: https://feature-sliced.design

To summarize:

• Rename clanPageLayout.scss to ClanPageLayout.scss
• Move code related to layout to proper location
• Dont override the old layout yet, since it may break some clan elements.
• Make sure build and tests pass

[leolabdev]

@Skoivumaki @Rutjake Hey guys, we use CSS (SCSS) modules, not plain CSS.

[Skoivumaki]

Looks good and works as expected. Only thing missing was the export in index.ts for the layout itself, but I added that myself.

[leolabdev]

please use for breakpoints the following below scss function:

[Jonroi]

I read the latest comments from the reviewers and noted that the breakpoints have been used correctly and the previous tasks have been completed, so good work

[Skoivumaki]

same as above