HANDIKA: fix spelling issue and update in job form builder

src/components/Collaboration/JobFormBuilder.module.css

@@ -2,19 +2,22 @@
 @import url('./jobFormTheme.module.css');
 
 .oneCommunityGlobalImg {
+  display: block;
+  width: 100%;
   height: auto;
   max-width: 1000px;
 }
 
 .formBuilderContainer {
   background-color: var(--jfb-white);
-  max-width: 80%;
-  margin: 1% 10% 0;
+  width: min(1000px, calc(100% - 32px));
+  margin: 1% auto 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 10px;
   padding: 5px;
+  box-sizing: border-box;
   border: 1px solid #e8e8e8;
   box-shadow: 0 1px 4px rgb(0 0 0 / 6%);
 }
@@ -33,21 +36,27 @@
 }
 
 .customForm {
+  width: 100%;
   background-color: var(--jfb-white);
   padding: 10px;
   margin-top: 0;
   border-radius: 5px;
   border: 1px solid #ebebeb;
+  box-sizing: border-box;
 }
 
 .jobformNavbar {
   display: flex;
+  width: 100%;
   padding: 0 10px;
+  gap: 16px;
   justify-content: space-between;
+  align-items: center;
   background-color: var(--jfb-lime);
   border-radius: 5px;
   border: 1px solid var(--jfb-lime);
   margin-bottom: 12px;
+  box-sizing: border-box;
 }
 
 .jobformNavbar input {
@@ -61,12 +70,23 @@
 
 .jobformNavbar div {
   display: flex;
+  flex: 1 1 0;
+  min-width: 0;
   padding: 2px;
 }
 
+.jobformNavbar div:first-child {
+  align-items: center;
+}
+
+.jobformNavbar input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 .jobformNavbar button {
   padding: 11px 13px;
-  margin: 8px 10px;
+  margin: 8px 0 8px 10px;
   border: none;
   background-color: var(--jfb-white);
   color: var(--jfb-text);
@@ -105,13 +125,14 @@
 .jobformInput,
 .jobformTextarea,
 .jobformSelect {
-  width: 95%;
+  width: 100%;
   padding: 10px;
   margin-top: 5px;
   margin-bottom: 15px;
   border: 1px solid #ccc;
   border-radius: 5px;
   background-color: white;
+  box-sizing: border-box;
 }
 
 .jobformTextarea {
@@ -231,12 +252,73 @@
   padding: 0;
 }
 
-@media (width <= 768px) {
+@media (width <= 992px) {
+  .formBuilderContainer {
+    width: calc(100% - 24px);
+    margin-top: 12px;
+  }
+
+  .jobformNavbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    padding: 6px 10px;
+  }
+
+  .jobformNavbar div {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .jobformNavbar select {
+    max-width: 100%;
+  }
+
+  .standardApplicantGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .formDiv {
     grid-template-columns: 1fr;
   }
 }
 
+@media (width <= 576px) {
+  .formBuilderContainer {
+    width: 100%;
+    margin-top: 0;
+    padding: 4px;
+    border-radius: 0;
+  }
+
+  .customForm,
+  .newFieldSection,
+  .standardApplicantSection {
+    padding: 12px;
+  }
+
+  .jobformNavbar {
+    padding: 6px 8px;
+  }
+
+  .jobformTitle {
+    font-size: 1.5rem;
+  }
+
+  .jobformDesc {
+    line-height: 1.6;
+  }
+
+  .standardApplicantGrid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .formDiv {
+    gap: 12px;
+    padding: 10px;
+  }
+}
+
 /* Individual Option Item */
 .optionItem {
   display: flex;
@@ -291,7 +373,6 @@
   width: 100%;
   padding: 12px;
   text-align: center;
-  margin-top: 20px;
   margin-left: auto;
   margin-right: auto;
   background-color: var(--jfb-lime);
@@ -311,8 +392,6 @@
 .saveSection {
   display: flex;
   justify-content: center;
-  margin-top: 15px;
-  margin-bottom: 20px;
 }
 
 /* Dark mode styles */
@@ -451,8 +530,13 @@
 
 /* Preview label (text-style) above save button */
 .previewSection {
-  margin-top: 20px;
-  margin-bottom: 8px;
+  padding-inline: 20px;
+}
+
+@media(width <= 576px) {
+  .previewSection {
+    padding-inline: 12px;
+  }
 }
 
 .previewTextButton {
@@ -475,7 +559,13 @@
 }
 
 .saveSection {
-  margin-top: 12px;
+  padding: 20px
+}
+
+@media(width <= 576px) {
+  .saveSection {
+    padding: 12px;
+  }
 }
 
 .darkMode .previewTextButton {

src/components/Collaboration/JobFormbuilder.jsx

@@ -405,13 +405,13 @@ function JobFormBuilder() {
             </select>
           </div>
         </div>
-        <h1 className={styles.jobformTitle}>FORM CREATION</h1>
+        <h1 className={styles.jobformTitle}>Job Question Set Builder</h1>
         {canManageJobForms ? (
           <div className={styles.customForm}>
             <p className={styles.jobformDesc}>
-              Fill the form with questions about a specific position you want to create an ad for.
-              The default questions will automatically appear and are alredy selected. You can pick
-              and choose them with the checkbox.
+              Use this page to create or edit question templates for job postings. Default questions
+              are preselected automatically, and you can customize the form by adding, removing, or
+              rearranging fields.
             </p>
             <QuestionSetManager
               formFields={formFields}

src/components/Collaboration/QuestionSetManager.module.css

@@ -81,7 +81,6 @@
 }
 
 .saveTemplate input {
-  flex: 1 1 220px;
   max-width: 320px;
   min-width: 180px;
 }