Make all pages scaleable

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.

src/components/header.tsx

@@ -18,7 +18,7 @@ export default function Header() {
     ]
 
     return (
-        <div>
+        <div className="headerWrapper">
             <header>
                 <div id="logo">
                     <Link to="/" aria-label="GameStart home">
@@ -56,7 +56,7 @@ export default function Header() {
                     )}
                 </div>
             </header>
-            <Divider />
+            <Divider className="headerDivider" />
         </div>
     )
 }

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;
+    }
 }

src/css/header.css

@@ -1,21 +1,22 @@
 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;
 }
 
 #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;
+    }
+}

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%;
     }
 }

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;
+    }
 }