fixed

Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT
Refactor
2026-03-25 10:17:10 +08:00 · 2026-03-25 10:16:40 +08:00 · 2026-03-19 18:57:20 +08:00
30 changed files with 171 additions and 177 deletions
--- a/frontend/src/app/agents/styles.module.css
+++ b/frontend/src/app/agents/styles.module.css
@@ -31,7 +31,7 @@
 .tableContainer > table > tbody > tr > td {
  color: #eeeffd;
  font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -65,7 +65,7 @@
 .tableContainer > table > thead > tr > th {
  color: #85869b;
  font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -113,7 +113,7 @@
  outline: none;
  color: white;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  outline: none;
  font-style: normal;
  font-weight: 400;
--- a/frontend/src/app/components/alerts/styles.module.css
+++ b/frontend/src/app/components/alerts/styles.module.css
@@ -75,7 +75,7 @@
 .headers > p {
  color: #fff;
  font-family: Inter;
-  font-size: 20px;
+  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
@@ -91,7 +91,7 @@
 .body > p {
  color: #fff;
  font-family: Inter;
-  font-size: 14px;
+  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
--- a/frontend/src/app/components/buttons/primarybutton/styles.module.css
+++ b/frontend/src/app/components/buttons/primarybutton/styles.module.css
@@ -8,7 +8,7 @@
  border: 0.5px solid #8187ff;
  background: rgba(83, 89, 242, 0.25);
  color: white;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
--- a/frontend/src/app/components/buttons/secondaryButton/styles.module.css
+++ b/frontend/src/app/components/buttons/secondaryButton/styles.module.css
@@ -9,7 +9,7 @@
  border: 0.5px solid #4e537e;
  cursor: pointer;
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;

  font-style: normal;
  font-weight: 500;
--- a/frontend/src/app/components/customCheckbox/styles.module.css
+++ b/frontend/src/app/components/customCheckbox/styles.module.css
@@ -12,19 +12,18 @@
 }
 .checkbox {
  display: flex;
-  padding: var(--Basic-Forms-Checkbox-Input-Sizing-Y-SM, 10px)
-    var(--Basic-Forms-Checkbox-Input-Sizing-X-SM, 12px);
+  padding: 10px 12px;
  align-items: flex-start;
-  gap: var(--Basic-Forms-Checkbox-Gap-Between, 16px);
+  gap: 16px;
  flex: 1 0 0;
-  border-radius: var(--Basic-Forms-Checkbox-Border-Radius, 8px);
+  border-radius: 8px;
  background: #1d1e2a;
 }
 .check {
  display: flex;
-  padding-top: var(--Basic-Forms-Checkbox-Inline-Y, 4px);
+  padding-top: 4px;
  align-items: flex-start;
-  gap: var(--Basic-Forms-Checkbox-Inline-Gap-Between, 10px);
+  gap: 10px;
 }
 .hiddenCheckbox {
  appearance: none;
@@ -37,29 +36,15 @@
  align-items: center;
  cursor: pointer;
  position: relative;
-  border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
-  border: 1px solid
-    var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Color, #e5e7eb);
+  border-radius: 4px;
+  border: 1px solid #e5e7eb;

-  background: var(--Basic-Forms-Checkbox-Check-Icon-Background-Bg-Color, #fff);
+  background: #fff;
 }
 .hiddenCheckbox:checked {
-  border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
-  border: 1px solid
-    var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd);
-  border: 1px solid
-    var(
-      --Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color,
-      color(display-p3 0.1451 0.3882 0.9216)
-    );
-  background: var(
-    --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
-    #0067fd
-  );
-  background: var(
-    --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
-    color(display-p3 0.1451 0.3882 0.9216)
-  );
+  border-radius: 4px;
+  border: 1px solid #0067fd;
+  background: #0067fd;
 }
 .hiddenCheckbox::after {
  content: "";
@@ -85,19 +70,19 @@
  align-self: stretch;
  color: #d2d3e1;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
-  line-height: 24px; /* 150% */
+  line-height: 24px;
  letter-spacing: 0.08px;
 }
 .secondaryTxt {
  align-self: stretch;
  color: #697281;
  font-family: Inter;
-  font-size: 14px;
+  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
-  line-height: 20px; /* 142.857% */
+  line-height: 20px;
  letter-spacing: 0.07px;
 }
--- a/frontend/src/app/components/fields/styles.module.css
+++ b/frontend/src/app/components/fields/styles.module.css
@@ -12,7 +12,7 @@
  background-color: transparent;
  color: white;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  outline: none;
  font-style: normal;
  font-weight: 400;
@@ -27,7 +27,7 @@
 .input:focus::placeholder {
  color: #4b4f6d;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -38,7 +38,7 @@
 .input::placeholder {
  color: #85869b;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/components/mobileSearchBar/styles.module.css
+++ b/frontend/src/app/components/mobileSearchBar/styles.module.css
@@ -16,7 +16,7 @@
  background-color: transparent;
  color: white;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
  outline: none;
  font-style: normal;
  font-weight: 400;
--- a/frontend/src/app/components/searchbar/styles.module.css
+++ b/frontend/src/app/components/searchbar/styles.module.css
@@ -2,7 +2,7 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  width: 40px; /*collapse width*/
+  width: 40px;
  border-radius: 6px;
  padding: 6px;
  height: auto;
@@ -15,7 +15,6 @@
  background: #292a36;
  background: color(display-p3 0.1608 0.1647 0.2078);
 }
-/* When the searchbar is opened */
 .open {
  width: 260px;
  padding: 6px 6px 6px 12px;
@@ -34,7 +33,7 @@
  color: #85869b;
  color: color(display-p3 0.5216 0.5255 0.6);
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -52,7 +51,7 @@
  color: color(display-p3 0.5216 0.5255 0.6);
  text-align: start;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/components/sidebar/styles.module.css
+++ b/frontend/src/app/components/sidebar/styles.module.css
@@ -64,18 +64,14 @@
 .logoDescription > p:nth-child(1) {
  color: #fff;
  color: color(display-p3 1 1 1);
-  font-size: 15px;
-  font-style: normal;
+  font-size: 0.94rem;
  font-weight: 500;
  line-height: 18px;
 }
 .logoDescription > p:nth-child(2) {
  color: #85869b;
  color: color(display-p3 0.5216 0.5255 0.6);
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
+  font-size: 0.63rem;
  letter-spacing: 0.05px;
  align-self: stretch;
 }
@@ -91,11 +87,7 @@
  align-items: center;
  cursor: pointer;
  gap: 16px;
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
+  font-size: 1rem;
  border-left: 2px solid #959aff00;
  align-self: stretch;
 }
@@ -112,11 +104,7 @@
  border-left: 2px solid #959aff;
  background: rgba(149, 154, 255, 0.05);
  color: #959aff;
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
+  font-size: 1rem;
 }
 .active:hover path {
  stroke: #969af9;
@@ -153,11 +141,8 @@
 }
 .navFooterContainer > div > div > p {
  color: #d2d3e1;
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
+  font-size: 1rem;
  font-weight: 500;
-  line-height: normal;
 }
 .collapsed {
  width: 80px;
--- a/frontend/src/app/credentials/styles.module.css
+++ b/frontend/src/app/credentials/styles.module.css
@@ -31,7 +31,7 @@
 .tableContainer > table > tbody > tr > td {
  color: #eeeffd;
  font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -47,7 +47,7 @@
 .tableContainer > table > thead > tr > th {
  color: #85869b;
  font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -16,7 +16,6 @@ html,
 body {
  max-width: 100vw;
  overflow-x: hidden;
-  font-size: 16px;
 }

 body {
--- a/frontend/src/app/organization/add/styles.module.css
+++ b/frontend/src/app/organization/add/styles.module.css
@@ -3,7 +3,8 @@
  flex-direction: column;
  align-items: center;
  gap: 48px;
-  flex: 1 0 0;
+
+  height: calc(100vh - 170px);
  align-self: stretch;
 }
 .upperToolTips {
@@ -24,7 +25,7 @@
  color: #191a24;
  text-align: center;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -107,7 +108,7 @@
 .labels > p {
  color: #d2d3e1;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -115,7 +116,7 @@
 .labels > p span {
  color: #85869b;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
@@ -136,7 +137,7 @@
 .inputLabel > p {
  color: #d2d3e1;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -164,7 +165,7 @@
 .prompts > p {
  color: #d49e3d;
  font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/organization/card/styles.module.css
+++ b/frontend/src/app/organization/card/styles.module.css
@@ -23,7 +23,7 @@
 .list p {
  color: #85869b;
  font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -32,7 +32,7 @@
 .list p:nth-child(2) {
  color: #eeeffd;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-weight: 500;
 }
 .cardAction {
--- a/frontend/src/app/organization/styles.module.css
+++ b/frontend/src/app/organization/styles.module.css
@@ -30,7 +30,7 @@
 .tableContainer > table > tbody > tr > td {
  color: #eeeffd;
  font-family: Inter;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -46,7 +46,7 @@
 .tableContainer > table > thead > tr > th {
  color: #85869b;
  font-family: Inter;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
--- a/frontend/src/app/projects/add/styles.module.css
+++ b/frontend/src/app/projects/add/styles.module.css
@@ -34,7 +34,7 @@
  color: #d2d3e1;
  color: color(display-p3 0.8235 0.8275 0.8784);
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -42,7 +42,7 @@
 .label > p span {
  color: #cfb000;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
@@ -64,7 +64,7 @@
 .prompts > p {
  color: #d49e3d;
  font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/projects/project-card/styles.module.css
+++ b/frontend/src/app/projects/project-card/styles.module.css
@@ -24,7 +24,7 @@
 .list p {
  color: #85869b;
  font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -33,7 +33,7 @@
 .list p:nth-child(2) {
  color: #eeeffd;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-weight: 500;
 }
 .cardAction {
--- a/frontend/src/app/projects/styles.module.css
+++ b/frontend/src/app/projects/styles.module.css
@@ -36,7 +36,7 @@
 .tableContainer > table > tbody > tr > td {
  color: #eeeffd;
  font-family: Inter;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -52,7 +52,7 @@
 .tableContainer > table > thead > tr > th {
  color: #85869b;
  font-family: Inter;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -68,7 +68,7 @@
  color: #50d85f;
  font-family: Inter;

-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -77,7 +77,7 @@
  color: #85869b;
  font-family: Inter;

-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
--- a/frontend/src/app/projects/view/AddServicesModal/styles.module.css
+++ b/frontend/src/app/projects/view/AddServicesModal/styles.module.css
@@ -52,7 +52,7 @@
 }
 .header > div > p {
  color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -64,7 +64,7 @@
  gap: 4px;
  align-self: stretch;
  color: #85869b;
-  font-size: 14px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -122,7 +122,7 @@
 }
 .listDetails > p {
  color: #85869b;
-  font-size: 13px;
+  font-size: 0.83rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -135,7 +135,7 @@
 }
 .listDetails > div > p {
  color: #d2d3e1;
-  font-size: 18px;
+  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -153,7 +153,7 @@
 }
 .listDetails > div > div > p {
  color: #d2d3e1;
-  font-size: 14px;
+  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css
+++ b/frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css
@@ -62,7 +62,7 @@
  align-items: center;
  gap: 10px;
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -84,7 +84,7 @@
    "liga" off,
    "clig" off;
  font-family: Inter;
-  font-size: 12px;
+  font-size: 0.7rem;
  font-style: normal;
  font-weight: 500;
  line-height: 22px; /* 183.333% */
--- a/frontend/src/app/projects/view/[servicesId]/styles.module.css
+++ b/frontend/src/app/projects/view/[servicesId]/styles.module.css
@@ -41,7 +41,7 @@
  gap: 5px;
  color: #85869b;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;

  font-weight: 400;
 }
@@ -90,7 +90,7 @@
  border: 1px solid #4b4f6d;
  resize: none;
  color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
  font-family: inter;
  font-style: normal;
  font-weight: 400;
@@ -98,6 +98,9 @@
  letter-spacing: 0.16px;
  outline: none;
 }
+.textarea::placeholder {
+  color: #85869b;
+}
 .textarea:focus {
  border-radius: 6px;
  border: 1px solid #959aff;
@@ -106,7 +109,7 @@
 .textarea:focus::placeholder {
  color: #4b4f6d;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -128,7 +131,7 @@
 }
 .projectDetailsHeader p {
  color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -176,7 +179,7 @@
 .fieldsCreateNew > div > div p,
 .resourceFields > div > div p {
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -199,7 +202,7 @@
  border: 1px dashed #5980f1;
  color: #5980f1;
  text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -250,7 +253,7 @@

 .additionalDetailsHeader p {
  color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -287,7 +290,7 @@
 }
 .additionalDetailsFields p {
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/projects/view/[servicesId]/variableStyles.module.css
+++ b/frontend/src/app/projects/view/[servicesId]/variableStyles.module.css
@@ -35,7 +35,7 @@
 .searchInputGroup input {
  color: white;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -105,7 +105,7 @@
  border-radius: 4px;
  color: #acb0ff;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -120,7 +120,7 @@
  gap: 12px;
  color: #acb0ff;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -165,7 +165,7 @@
  flex: 1 0 0;
  align-self: stretch;
  color: #d2d3e1;
-  font-size: 15px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -195,7 +195,7 @@
  flex: 1 0 0;
  color: #fff;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -219,7 +219,7 @@
  flex: 1 0 0;
  color: #85869b;
  font-family: Inter;
-  font-size: 15px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -252,7 +252,7 @@
  flex: 1 0 0;
  color: #85869b;
  text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
--- a/frontend/src/app/projects/view/add-from-scratch/styles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/styles.module.css
@@ -41,7 +41,7 @@
  gap: 5px;
  color: #85869b;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;

  font-weight: 400;
 }
@@ -80,7 +80,7 @@
 }
 .projectDetailsHeader p {
  color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -121,7 +121,7 @@
  border: 1px solid #4b4f6d;
  resize: none;
  color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
  font-family: inter;
  font-style: normal;
  font-weight: 400;
@@ -129,6 +129,9 @@
  letter-spacing: 0.16px;
  outline: none;
 }
+.textarea::placeholder {
+  color: #85869b;
+}
 .textarea:focus {
  border-radius: 6px;
  border: 1px solid #959aff;
@@ -137,7 +140,7 @@
 .textarea:focus::placeholder {
  color: #4b4f6d;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -184,7 +187,7 @@
 .fieldsCreateNew > div > div p,
 .resourceFields > div > div p {
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -207,7 +210,7 @@
  border: 1px dashed #5980f1;
  color: #5980f1;
  text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -258,7 +261,7 @@

 .additionalDetailsHeader p {
  color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -295,7 +298,7 @@
 }
 .additionalDetailsFields p {
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
@@ -35,7 +35,7 @@
 .searchInputGroup input {
  color: white;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -105,7 +105,7 @@
  border-radius: 4px;
  color: #acb0ff;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -120,7 +120,7 @@
  gap: 12px;
  color: #acb0ff;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -165,7 +165,7 @@
  flex: 1 0 0;
  align-self: stretch;
  color: #d2d3e1;
-  font-size: 15px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -195,7 +195,7 @@
  flex: 1 0 0;
  color: #fff;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -219,7 +219,7 @@
  flex: 1 0 0;
  color: #85869b;
  font-family: Inter;
-  font-size: 15px;
+  font-size: 0.93rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -252,7 +252,7 @@
  flex: 1 0 0;
  color: #85869b;
  text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
--- a/frontend/src/app/projects/view/page.jsx
+++ b/frontend/src/app/projects/view/page.jsx
@@ -111,10 +111,11 @@ const AddProject = () => {
                "services-drop-down",
              ]}
            />
-            {isMobile ? (
+
            <div className={styles.cardContainer}>
              <MobileSearchBar />
-                {sampleData.map((data, key) => (
+              {isMobile &&
+                sampleData.map((data, key) => (
                  <Card
                    data={data}
                    key={key}
@@ -122,7 +123,7 @@ const AddProject = () => {
                  />
                ))}
            </div>
-            ) : (
+
            <div className={styles.tableContainer}>
              <table className={styles.table}>
                <thead>
@@ -138,7 +139,8 @@ const AddProject = () => {
                  </tr>
                </thead>
                <tbody>
-                    {sampleData.map((services, index) => {
+                  {!isMobile &&
+                    sampleData.map((services, index) => {
                      return (
                        <tr
                          key={index}
@@ -383,7 +385,6 @@ const AddProject = () => {
                </tbody>
              </table>
            </div>
-            )}
          </div>
        </div>
      </div>
--- a/frontend/src/app/projects/view/service-card/styles.module.css
+++ b/frontend/src/app/projects/view/service-card/styles.module.css
@@ -24,7 +24,7 @@
 .list > p {
  color: #85869b;
  font-family: Inter;
-  font-size: 14px;
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -34,7 +34,7 @@
 .list > p:nth-child(2) {
  color: #eeeffd;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-weight: 500;
 }
 .cardAction {
@@ -63,7 +63,7 @@
  background: rgba(22, 159, 49, 0.05);
  color: #179f31;
  font-family: Inter;
-  font-size: 12px;
+  font-size: 0.63rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -91,7 +91,7 @@
  gap: 4px;
  color: #179f31;
  font-family: Inter;
-  font-size: 10px;
+  font-size: 0.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/projects/view/styles.module.css
+++ b/frontend/src/app/projects/view/styles.module.css
@@ -19,7 +19,7 @@
  color: #85869b;
  font-family: Inter;
  z-index: 3;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -41,7 +41,7 @@
  font-family: Inter;
  overflow-wrap: anywhere;

-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -78,7 +78,7 @@
  background: rgba(22, 159, 49, 0.05);
  color: #179f31;
  font-family: Inter;
-  font-size: 12px;
+  font-size: 0.65rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -106,7 +106,7 @@
  gap: 4px;
  color: #179f31;
  font-family: Inter;
-  font-size: 10px;
+  font-size: 0.65rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -188,7 +188,7 @@
  opacity: 1;
 }
 .cardContainer {
-  display: flex;
+  display: none;
  padding: 0 16px;
  padding-bottom: 50px;
  height: calc(100vh - 170px);
@@ -198,3 +198,11 @@
  align-self: stretch;
  overflow: auto;
 }
+@media (max-width: 768px) {
+  .cardContainer {
+    display: flex;
+  }
+  .tableContainer {
+    display: none;
+  }
+}
--- a/frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css
+++ b/frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css
@@ -47,7 +47,7 @@

 .header > p {
  color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -83,7 +83,7 @@
  align-items: flex-start;
  gap: 5px;
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -147,7 +147,7 @@
 }
 .verticalInput p {
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -168,7 +168,7 @@
  border: 1px solid #4b4f6d;
  resize: none;
  color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
  font-family: inter;
  font-style: normal;
  font-weight: 400;
@@ -184,7 +184,7 @@
 .verticalInput textarea:focus::placeholder {
  color: #4b4f6d;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -207,7 +207,7 @@
  display: flex;
  align-items: flex-start;
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx
+++ b/frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx
@@ -112,6 +112,14 @@ const AddVariableModal = (props) => {
                        </div>
                      </div>
                    </div>
+                    <div className={styles.verticalInput}>
+                      <div>
+                        <div>
+                          <p>Custom Port (Optional)</p>
+                        </div>
+                        <TextField placeHolder="Leave empty to use service’s default port" />
+                      </div>
+                    </div>
                  </>
                )}
              </div>
--- a/frontend/src/app/projects/view/variableModals/AddVariableModal/styles.module.css
+++ b/frontend/src/app/projects/view/variableModals/AddVariableModal/styles.module.css
@@ -46,7 +46,7 @@

 .header > p {
  color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -82,7 +82,7 @@
  align-items: flex-start;
  gap: 5px;
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -106,6 +106,9 @@
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
+  max-height: 400px;
+  overflow-y: scroll;
+  padding: 0px 5px;
 }
 .horizontalInput {
  display: flex;
@@ -146,7 +149,7 @@
 }
 .verticalInput p {
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -167,7 +170,7 @@
  border: 1px solid #4b4f6d;
  resize: none;
  color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
  font-family: inter;
  font-style: normal;
  font-weight: 400;
@@ -183,7 +186,7 @@
 .verticalInput textarea:focus::placeholder {
  color: #4b4f6d;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -197,8 +200,7 @@
  align-self: stretch;
 }
 .authenticationContainer > p {
-  color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/projects/view/variableModals/AddVolumes/styles.module.css
+++ b/frontend/src/app/projects/view/variableModals/AddVolumes/styles.module.css
@@ -45,7 +45,7 @@

 .header > p {
  color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -81,7 +81,7 @@
  align-items: flex-start;
  gap: 5px;
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -145,7 +145,7 @@
 }
 .verticalInput p {
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -166,7 +166,7 @@
  border: 1px solid #4b4f6d;
  resize: none;
  color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
  font-family: inter;
  font-style: normal;
  font-weight: 400;
@@ -187,7 +187,7 @@
 }
 .authenticationContainer > p {
  color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
Author	SHA1	Message	Date
Laux Dev	18524971f8	fixed	2026-03-25 10:17:10 +08:00
Laux Dev	395de5ef88	Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT	2026-03-25 10:16:40 +08:00
Laux Dev	2c9f2d612b	Refactor	2026-03-19 18:57:20 +08:00