From f0259f0bc96086e34e15b198ac3ba9c91ae88dc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eline=20J=C3=A5sund?= Date: Wed, 14 Oct 2026 12:59:43 +0200 Subject: [PATCH 1/6] style: make footer scalable Footer logo and text will shrink on smaller screens. --- README.md | 4 ++++ src/css/footer.css | 37 ++++++++++++++++++++++++++++++++----- 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index ffea141..457f829 100644 --- a/README.md +++ b/README.md @@ -130,6 +130,10 @@ For checking ESLint run ```npm run lint```. We have not yet set up the database for this project. +## Scalability +Phone size = 390 px × 844 px +Tablet size = 768 px × 1024 + ## Tests To run tests, open the terminal and ```run npx vitest```. To test with coverage, install ```npm install -D @vitest/coverage-v8``` and run ```npx vitest --coverage``` to include coverage. Per now, since there is no logic on the application pages, we have only written tests for the api. diff --git a/src/css/footer.css b/src/css/footer.css index e3f5bb1..998f5bf 100644 --- a/src/css/footer.css +++ b/src/css/footer.css @@ -1,13 +1,14 @@ - .footerWrapper { +.footerWrapper { width: 100%; flex: 0 0 auto; margin-top: auto; } footer { - height: 4rem; - flex: 0 0 4rem; + box-sizing: border-box; width: 100%; + min-height: 4rem; + padding: 0.75rem clamp(1rem, 4vw, 2rem); background-color: var(--secondary-background-color); display: flex; align-items: center; @@ -17,12 +18,38 @@ footer { footer h1 { display: flex; align-items: center; - gap: 0.5rem; + justify-content: center; + gap: clamp(0.4rem, 1.5vw, 0.75rem); margin: 0; - font-size: 1rem; + font-size: clamp(0.85rem, 2vw, 1rem); } .footerBrandLogo { height: 1.5rem; width: auto; + height: clamp(1.25rem, 4vw, 1.5rem); +} + +/* Scalability */ + +/* Tablet size */ +@media (max-width: 1032) { + footer { + min-height: 3.5rem; + } +} +/* Phone size */ +@media (max-width: 393px) { + footer { + min-height: 3rem; + padding-inline: 0.75rem; + } + + footer h1 { + font-size: 0.85rem; + } + + .footerBrandLogo { + height: 1.2rem; + } } From a1a8925e2e1477b590455028ed3575f2e20b5ece Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eline=20J=C3=A5sund?= Date: Wed, 14 Oct 2026 13:26:01 +0200 Subject: [PATCH 2/6] style: make header scalable --- src/components/header.tsx | 42 +++++++++---------- src/css/header.css | 86 +++++++++++++++++++++++++++++++++++---- 2 files changed, 99 insertions(+), 29 deletions(-) diff --git a/src/components/header.tsx b/src/components/header.tsx index d25c7fb..c84f538 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -2,7 +2,7 @@ import { Link, NavLink } from 'react-router-dom' import '../css/header.css' import { House, UserRound, Search, Sparkles, LogIn } from 'lucide-react' import gameStartLogo from '../assets/logo_gamestart_transparent.png' -import Divider from '@mui/material/Divider'; +import Divider from '@mui/material/Divider' export default function Header() { const navigationLinks = [ @@ -15,29 +15,29 @@ export default function Header() { ] return ( -
+
- + - +
- +
) } diff --git a/src/css/header.css b/src/css/header.css index 4121781..67157c7 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -1,6 +1,8 @@ header { - height: 5em; + box-sizing: border-box; width: 100%; + min-height: 5rem; + padding: 0.75rem clamp(1rem, 3vw, 2rem); background-color: var(--secondary-background-color); display: flex; align-items: center; @@ -8,14 +10,13 @@ header { #logo { margin: 0; - padding-left: 2rem; + padding: 0; + flex-shrink: 0; } -#logo h1 { +#logo a { display: flex; align-items: center; - gap: 0.5rem; - margin: 0; } #logo a { @@ -24,15 +25,17 @@ header { } .headerBrandLogo { - height: 2.5rem; + display: block; width: auto; + height: clamp(1.75rem, 4vw, 2.5rem); } #navigationMenue { display: flex; - gap: 0.5rem; + align-items: center; + gap: clamp(0.25rem, 1vw, 0.75rem); margin-left: auto; - padding: 0 1rem; + padding: 0; } #navigationMenue a { @@ -42,6 +45,14 @@ header { padding: 0.5rem; color: var(--primary-text-color); text-decoration: none; + white-space: nowrap; + font-size: clamp(0.8rem, 1.4vw, 1rem); +} + +#navigationMenue a svg { + width: 1.25rem; + height: 1.25rem; + flex-shrink: 0; } #navigationMenue a.is-active { @@ -58,3 +69,62 @@ header > button { color: var(--primary-text-color); cursor: pointer; } + +.headerWrapper { + box-sizing: border-box; + width: 100%; + align-self: stretch; +} + +.headerDivider { + width: 100vw; +} + +/*Scalability*/ +/* Tablet */ +@media (max-width: 1032px) { + header { + min-height: 4.5rem; + } + + #navigationMenue { + gap: 0.15rem; + } + + #navigationMenue a { + gap: 0.25rem; + padding: 0.4rem; + } +} + +/* Phone */ +@media (max-width: 620px) { + header { + flex-direction: column; + justify-content: center; + gap: 0.5rem; + padding: 0.75rem 0.5rem; + } + + #navigationMenue { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + width: 100%; + margin-left: 0; + gap: 0.25rem; + } + + #navigationMenue a { + flex-direction: column; + justify-content: center; + gap: 0.2rem; + min-width: 0; + padding: 0.35rem 0.1rem; + font-size: 0.7rem; + } + + #navigationMenue a svg { + width: 1.15rem; + height: 1.15rem; + } +} From 437b8d4a78472fb27b613020ab9e07eb1a20b034 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eline=20J=C3=A5sund?= Date: Wed, 14 Oct 2026 13:38:26 +0200 Subject: [PATCH 3/6] style: make pageheading scalable --- src/css/pageheading.css | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/css/pageheading.css b/src/css/pageheading.css index 5786b55..a8f10e9 100644 --- a/src/css/pageheading.css +++ b/src/css/pageheading.css @@ -3,14 +3,15 @@ display: flex; align-items: center; justify-content: space-between; - gap: 1.5rem; + gap: clamp(0.75rem, 2vw, 1.5rem); width: min(calc(100% - 3rem), 75rem); - margin: 1.75rem auto 1.5rem; + margin: clamp(1.25rem, 4vw, 1.75rem) auto clamp(1rem, 3vw, 1.5rem); } .pageHeadingTitleGroup { display: flex; align-items: center; + flex: 1 1 auto; gap: 0.75rem; min-width: 0; } @@ -50,29 +51,38 @@ .pageHeadingTitle { margin: 0; - font-size: 2rem; + min-width: 0; + font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; + overflow-wrap: anywhere; } .pageHeadingActions { display: flex; align-items: center; - gap: 0.75rem; + flex: 0 1 auto; + gap: clamp(0.5rem, 1.5vw, 0.75rem); } -@media (max-width: 43.75rem) { +/*Scalability*/ +/* Phone */ +@media (max-width: 620px) { .pageHeading { - width: min(calc(100% - 2rem), 32rem); - margin: 1.25rem auto; flex-wrap: wrap; + width: min(calc(100% - 2rem), 32rem); gap: 0.75rem; } + .pageHeadingTitleGroup { + flex-basis: 100%; + } + .pageHeadingTitle { - font-size: 1.75rem; + font-size: clamp(1.35rem, 6vw, 1.75rem); } .pageHeadingActions { + flex-wrap: wrap; max-width: 100%; } } From 0f63c0d2bbd6dfb0a0403fe3a824f319377409e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eline=20J=C3=A5sund?= Date: Wed, 14 Oct 2026 13:38:38 +0200 Subject: [PATCH 4/6] style: make profilepage scalable --- src/css/profilepage.css | 73 +++++++++++++++++++++++++++++++---------- 1 file changed, 56 insertions(+), 17 deletions(-) diff --git a/src/css/profilepage.css b/src/css/profilepage.css index 5b216a3..d56aa7d 100644 --- a/src/css/profilepage.css +++ b/src/css/profilepage.css @@ -1,58 +1,97 @@ .profileContent { box-sizing: border-box; - width: min(calc(100% - 3rem), 75rem); + width: min(calc(100% - 2rem), 75rem); + min-width: 0; margin: 0 auto; - padding-left: 3.25rem; } .profile-card.MuiCard-root { + box-sizing: border-box; background-color: var(--primary-background-color); border: 1px solid var(--secondary-component-color); width: 100%; + min-width: 0; + max-width: 100%; height: auto; display: flex; flex-direction: column; - margin-top: 0; - margin-bottom: 5rem; -} - -@media (max-width: 43.75rem) { - .profileContent { - width: min(calc(100% - 2rem), 32rem); - } + margin: 0 0 clamp(2rem, 8vh, 5rem); } .profile-card .MuiDivider-root { align-self: stretch; } +.profile-card .MuiCardContent-root { + box-sizing: border-box; + padding: clamp(1rem, 3vw, 1.5rem); + min-width: 0; +} + .user-avatar.MuiAvatar-root { background-color: var(--secondary-component-color); color: var(--primary-component-color); - height: 5rem; - width: 5rem; - font-size: 2rem; + height: clamp(3.5rem, 8vw, 5rem); + width: clamp(3.5rem, 8vw, 5rem); + flex: 0 0 auto; + font-size: clamp(1.5rem, 4vw, 2rem); } .user-icon { display: flex; align-items: center; - gap: 1rem; + gap: clamp(0.75rem, 2vw, 1rem); + min-width: 0; } #user-name { - font-size: 3rem; + min-width: 0; + margin: 0; + font-size: clamp(1.75rem, 6vw, 3rem); + line-height: 1.15; + overflow-wrap: anywhere; } .user-details { display: flex; - flex-direction: row; + flex-wrap: wrap; align-items: baseline; gap: 0.75rem; } +.user-details h3, +.user-details p { + margin-block: 0.25rem; +} + .user-details-container.MuiCardContent-root { display: flex; flex-direction: column; - gap: 0.5rem; + gap: clamp(0.5rem, 2vw, 1rem); +} + +/*Scalability*/ +/* Phone */ +@media (max-width: 620px) { + .profileContent { + width: min(calc(100% - 2rem), 32rem); + } + + .profile-card .MuiCardContent-root { + padding: 1rem; + } + + .user-description p { + margin-block: 0; + overflow-wrap: anywhere; + } + + .user-details { + gap: 0.35rem 0.75rem; + } + + .user-details h3, + .user-details p { + overflow-wrap: anywhere; + } } From fb9892c6077ac5a651d7bccccf7860aa14a77679 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eline=20J=C3=A5sund?= Date: Fri, 16 Oct 2026 12:23:40 +0200 Subject: [PATCH 5/6] style: make wishlistpage scalable --- src/css/wishlistgamecard.css | 25 +++++++++++++++++-------- src/css/wishlistpage.css | 19 ++++++++++++++----- 2 files changed, 31 insertions(+), 13 deletions(-) diff --git a/src/css/wishlistgamecard.css b/src/css/wishlistgamecard.css index be001b6..74f463e 100644 --- a/src/css/wishlistgamecard.css +++ b/src/css/wishlistgamecard.css @@ -1,7 +1,9 @@ .wishlistGameCard { + box-sizing: border-box; display: flex; align-items: stretch; width: 100%; + min-width: 0; border: 1px solid var(--primary-component-color); border-radius: 0.375rem; background-color: var(--primary-background-color); @@ -92,18 +94,18 @@ @media (max-width: 36rem) { .wishlistGameCardMedia { - flex-basis: 6rem; - width: 6rem; - height: 5.5rem; + flex-basis: 5rem; + width: 5rem; + height: 4.75rem; } .wishlistGameCardContent.MuiCardContent-root { - gap: 0.625rem; - padding: 0.75rem; + gap: 0.5rem; + padding: 0.5rem; } .wishlistGameCardContent.MuiCardContent-root:last-child { - padding-bottom: 0.75rem; + padding-bottom: 0.5rem; } .wishlistGameCardTitle { @@ -115,7 +117,14 @@ } .wishlistGameCardPriceAndRemove { - gap: 0.375rem; - padding: 0.75rem; + gap: 0.375rem; + padding: 0.5rem; + } + + .removeFromWishlistbuttonWishlistPage.MuiButton-root { + min-width: 0; + padding: 0.375rem 0.5rem; + font-size: 0.8rem; + white-space: nowrap; } } diff --git a/src/css/wishlistpage.css b/src/css/wishlistpage.css index 0dbc43a..695ebd3 100644 --- a/src/css/wishlistpage.css +++ b/src/css/wishlistpage.css @@ -5,12 +5,13 @@ } .wishlistPagination { - margin: 1rem 0; + margin: 16px 0; + max-width: 100%; } .games-grid-wishlist { display: grid; - gap: 1rem; + gap: 16px; } .sortingOptionWishlist.MuiMenuItem-root.Mui-selected, @@ -23,13 +24,21 @@ } .page-shell-wishlist .wishlistCard { - width: min(calc(100% - 3rem), 68rem); + width: min(calc(100% - 48px), 1088px); margin: 0 auto; } -@media (max-width: 43.75rem) { +@media (max-width: 700px) { + .page-shell-wishlist .pageHeadingTitleGroup { + flex-basis: 100%; + } + .page-shell-wishlist .wishlistCard { - width: min(calc(100% - 2rem), 32rem); + width: min(calc(100% - 32px), 512px); + } + + .wishlistPagination { + margin: 12px auto; } } From 5730d0bf13ed6c05e636734dbd4fc23346dadb9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eline=20J=C3=A5sund?= Date: Fri, 16 Oct 2026 12:27:28 +0200 Subject: [PATCH 6/6] style: make searchpage scalable --- src/css/searchpage.css | 36 +++++++++++++++++++++++++----------- 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/src/css/searchpage.css b/src/css/searchpage.css index 19e18db..43b5aed 100644 --- a/src/css/searchpage.css +++ b/src/css/searchpage.css @@ -1,8 +1,10 @@ .searchbar.MuiPaper-root { + box-sizing: border-box; display: flex; align-items: center; align-self: center; - width: min(30rem, calc(100% - 5rem)); + width: min(480px, calc(100% - 32px)); + min-width: 0; padding: 0; background-color: var(--secondary-component-color); border: 1px solid var(--primary-component-color); @@ -11,6 +13,7 @@ .searchinput.MuiInputBase-root { flex: 1; + min-width: 0; margin-left: 0.5rem; } @@ -24,8 +27,9 @@ } .filterbutton.MuiIconButton-root { + flex: 0 0 56px; height: 56px; - padding: 0 1rem; + padding: 0; border-left: 1px solid var(--primary-component-color); border-radius: 0 4px 4px 0; } @@ -54,14 +58,15 @@ align-self: center; justify-content: center; gap: 0.5rem; - width: min(30rem, calc(100% - 5rem)); - padding: 1rem; + width: min(480px, calc(100% - 32px)); + padding: 16px; border: 1px solid var(--primary-accent-color); border-top: 0; } .filtersection .MuiFormControl-root { - min-width: 140px; + flex: 1 1 200px; + min-width: min(100%, 140px); } @media (min-width: 600px) { @@ -83,24 +88,33 @@ .games-grid-searchpage { display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 4rem; - padding: 2rem; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); + gap: clamp(16px, 3vw, 32px); + box-sizing: border-box; + padding: 24px 0; align-self: center; - width: min(calc(100% - 3rem), 68rem); + width: min(calc(100% - 32px), 1088px); } .pageinationSearch { align-self: center; - padding-bottom: 1rem; + max-width: 100%; + padding-bottom: 16px; } .pageinationSearchTop { - margin-top: 1.5rem; + max-width: 100%; + margin-top: 24px; align-self: center; } .filterOption.MuiMenuItem-root.Mui-selected:hover, .filterOption.MuiMenuItem-root.Mui-selected.Mui-focusVisible { background-color: var(--primary-component-color); +} + +.pageinationSearch .MuiPagination-ul, +.pageinationSearchTop .MuiPagination-ul { + flex-wrap: wrap; + justify-content: center; } \ No newline at end of file