better responsive design for server details page

and create server page

src/components/CreateServer/CreateServer.jsx

@@ -102,7 +102,7 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer
                 <option>Version</option>
                 <option value="1.21">1.21</option>
               </select>
-              <div>
+              <div className={styles.buttonContainer}>
                 <button className={styles.btnServCreate} onClick={handleCreateServer}>
                   Créer
                 </button>

src/components/CreateServer/CreateServer.module.scss

@@ -46,7 +46,6 @@
   margin-right: 1rem;
 }
 
-
 .containerNoserveur {
   display: flex;
   justify-content: center;
@@ -85,7 +84,7 @@
   cursor: pointer;
 }
 
-.btnServCreate{
+.btnServCreate {
   width: 15rem;
   height: 3.5rem;
   margin-top: 2.5rem;
@@ -93,10 +92,9 @@
   font-weight: 900;
   border-radius: 1rem;
   background-color: #090325;
-
 }
 
-.mainCardCreateServ{
+.mainCardCreateServ {
   margin-top: 5rem;
   display: flex;
   justify-content: center;
@@ -107,7 +105,7 @@
   padding: 2rem;
 }
 
-.mainCardSubdomain{
+.mainCardSubdomain {
   background-color: #1D1836;
   padding: 3rem;
   margin-top: 5rem;
@@ -115,7 +113,7 @@
   width: 55rem;
 }
 
-.subtitle{
+.subtitle {
   font-size: 1.2rem;
   color: #AAA6C3;
   font-weight: 600;
@@ -123,7 +121,7 @@
   margin-bottom: 2rem;
 }
 
-.inputsubdomain{
+.inputsubdomain {
   width: 50rem;
   padding: 1rem;
   margin-top: 1rem;
@@ -133,3 +131,83 @@
   color: white;
   font-size: 1rem;
 }
+
+@media (max-width: 800px) {
+
+  .buttonContainer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .title {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+  }
+
+  .subtitle {
+    font-size: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .input, .select {
+    width: 100%;
+    padding: 0.75rem;
+    font-size: 0.875rem;
+  }
+
+  .btnSubCreate, .btnServCreate {
+    margin-top: 2rem;
+    padding: 1rem 2.5rem;
+    font-size: 1rem;
+    margin-right: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .mainCardNoserveur {
+    padding: 2rem;
+    margin-top: 3rem;
+  }
+
+  .nsTitle {
+    font-size: 2rem;
+  }
+
+  .nsSubTitle {
+    font-size: 1.2rem;
+  }
+
+  .btnnoServCreate {
+    width: 100%;
+    height: 3.5rem;
+    font-size: 1.5rem;
+    margin-top: 3rem;
+  }
+
+  .btnServCreate {
+    width: 100%;
+    height: 2.5rem;
+    font-size: 1.25rem;
+  }
+
+  .mainCardCreateServ {
+    margin-top: 3rem;
+    padding: 1.5rem;
+    width: 35rem;
+  }
+
+  .mainCardSubdomain {
+    padding: 2rem;
+    margin-top: 3rem;
+    width: 100%;
+  }
+
+  .inputsubdomain {
+    width: 100%;
+    padding: 0.75rem;
+    font-size: 0.875rem;
+  }
+}

src/components/serverCard/serverCard.module.scss

@@ -30,7 +30,7 @@
   background-color: #008d5f;
   color: white;
   border: none;
-  padding: 10px 20px;
+  padding: 1rem 1.6rem;
   border-radius: 0.6rem;
   outline: none;
   cursor: pointer;
@@ -42,7 +42,7 @@
   background-color: #8d213e;
   color: white;
   border: none;
-  padding: 10px 20px;
+  padding: 1rem 1.6rem;
   border-radius: 0.6rem;
   outline: none;
   cursor: pointer;

src/pages/ServerDetails/ServerDetails.module.scss

@@ -43,6 +43,7 @@
   border-radius: 0.5rem;
   color: var(--text-color);
   font-size: 1.2rem;
+  line-height: 1.4rem; 
   box-sizing: border-box;
 }
 
@@ -105,3 +106,11 @@
     margin-bottom: 2rem;
   }
 }
+
+.formGroup input[type="number"],
+.formGroup input[type="text"],
+.formGroup select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}