Implement student profile page v2

[dwlnana]

No description provided.

[miastubb]

Thanks for the update. The profile page structure is clear and the layout is close to the intended design. The class naming is consistent, and the route addition in routes.js is straightforward.
A few items to tighten up so the page behaves reliably with real-world data and across breakpoints:

Text fitting in rows: For longer values (e.g., emails), the current flex setup can cause wrapping/spacing issues. I’d recommend switching the label/value layout to a more stable two-column approach (either CSS grid or flex with a fixed label basis) and adding overflow-wrap for long strings so content stays inside the card.

Width constraints: max-width: 361px on the page container is quite tight and can make “label + value” layouts struggle. Consider using a more responsive max width (or moving width constraints to the card instead).

Header content: The header appears to include placeholder text ("here") and doesn’t match the project’s shared header pattern yet. Not blocking for this ticket, but worth aligning later to avoid rework/merge conflicts.

[miastubb]

A hard max-width: 361px on .profile-page (so you’re forcing a very narrow container), and

Each row is display:flex; justify-content: space-between; with both columns flex: 1, so long values (email) can push the label/value columns into awkward wrapping and overflow.
Example changes:
.profile__row{
display: flex;
align-items: baseline;
gap: 12px;
}
.profile-label{
flex: 0 0 110px;
font-weight: 700;
margin: 0;
}
.profile-value{
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
margin: 0;
}
Secondary fix: stop constraining the page to 361px
Right now:
.profile-page{
max-width: 361px;
}
That is unusually tight and will make any “two-column” layout struggle. Use a responsive max-width instead:
.profile-page{
padding: 70px 16px 0;
width: 100%;
max-width: 600px; /* or match Figma’s card width */
min-height: 100vh;
margin: 0 auto;
}
If the card is the thing that should be fixed-width (more typical), put the max-width on .profile__card instead and let .profile-page be fluid.
Seems like the container/card might be one issue here.

Header

Home | Login here Student profile The literal word “here” will render in the header and looks accidental.

[miastubb]

there is no changes made to the profile__card.

here is a good way of changing it so it aligns with the figma file (this is an excerpt from Lene's code. She has made a page similar to yours
.profile-card__wrapper {
max-width: 612px; /max width should be this size/
width: 100%;
padding: var(--padding-16px);
border: 3px solid #cccccc;
margin: var(--padding-24px) 0;
display: flex;
flex-direction: column;
align-items: center;
}
Take a look at her code, for inspiration, since the pages are similiar.
there are also 3 merge conflicts that needs cleaning up.

[miastubb]

Missing 1024px breakpoint (responsiveness)
There is only a media query at min-width: 767px:
There is no breakpoint at min-width: 1024px, so the layout does not adjust further for larger tablet/desktop screens as expected from the Figma.

Suggestion:

Add a @media (min-width: 1024px) block to:
Align the profile page width and spacing with other desktop pages (e.g. use a larger max-width, adjust padding/margins).
Ensure the card positioning and breadcrumb spacing match the design.

Breadcrumb styling – incorrect font usage
Current rule:
.profile-breadcrumb{
width: 100%;
display: flex;
gap: 16px;
font: var(--paragraph);
padding: 16px;
width: fit-content;
height: fit-content;
}
The font: shorthand is not used correctly here; var(--paragraph) in your design system is meant as a font-size (and possibly line-height), not a full font shorthand.
Also, width is set twice (width: 100% and width: fit-content).
Suggested fix:

.profile-breadcrumb {
display: flex;
gap: 16px;
padding: 16px;
font-size: var(--paragraph);
font-family: var(--primary-font);
width: fit-content;
height: fit-content;
}
Basically the font size is overwriting the font var.

Typography consistency

.profile-title uses both font: var(--heading-3); and font-size: 1.4rem; font-weight: 700;. This can override parts of your global typography system.

Suggestion:
Either rely fully on the design tokens, or set explicit values, but avoid mixing both in conflicting ways.

there is a mistake in the header, and in order to fix this the header needs fixing first so you get the correct code

[miastubb]

profile label has 0 0 110px on flex, but on mobile 320 it should be 0 0 80px

.profile-label{
font-weight: 700;
flex: 0 0 110px; /this is where the change needs to go/
letter-spacing: var(--letter-spacing);
line-height:var(--line-height);

in the media query at 768 breakpoint the same rule should be about 0 0 96px.

the page needs to be merged from development, both me and Ole can help with that.
plus, profile picture is different on mobile and desktop.
no big issues, just some adjustments to get it fully responsive

[miastubb]

there are 2 merge conflicts that needs to be fixed