new changes

src/app/pages/veriable-form/veriable-form.component.sass

@@ -1,71 +1,49 @@
-// General form styles
-form
-  max-width: 100%
-  margin: 20px auto
-  padding: 20px
-  border: 1px solid #ddd
-  border-radius: 5px
-  background-color: #f9f9f9
+.container
+  margin-top: 20px
 
-  .form-row
+.add-col-section
+  display: flex
+  flex-direction: row
+
+.add-col-section div
+   display:flex
+   flex-direction: row
+
+.column-section
+  width: auto
+  display: flex
+  flex-direction: row
+
+.form-group
+    margin-bottom: 15px
+    width: 150px
     display: flex
-    flex-direction: column
-    margin-bottom: 20px
-    padding: 10px
-    border: 1px solid #ccc
-    border-radius: 5px
-    background-color: #fff
+    margin-right: 10px!important
 
-    .form-column
-      display: flex
-      align-items: center
-      margin-bottom: 10px
+.add-column-btn
+  margin-top: 10px
+  display: block
 
-      > *
-        margin-right: 10px
+.add-row-btn
+  margin-top: 20px
 
-      select, input
-        padding: 8px
-        border-radius: 3px
-        border: 1px solid #ccc
-        width: 150px
+.submit-btn
+  margin-top: 30px
 
-    .row-buttons
-      margin-top: 10px
+.row-section
+  border: 1px solid #ccc
+  padding: 20px
+  margin-bottom: 20px
+  position: relative
 
-    .column-buttons
-      margin-left: auto // Push button to the right
+@media (min-width: 768px)
+  .add-col-section
+    display: flex // Ensures that the columns are stacked vertically
 
-  // Button styles
-  button
-    padding: 10px 15px
-    border: none
-    background-color: #007bff
-    color: white
-    border-radius: 5px
-    cursor: pointer
-    margin-right: 10px
-
-    &:hover
-      background-color: #0056b3
-
-    &[type="submit"]
-      margin-top: 20px
-      background-color: #28a745
-
-      &:hover
-        background-color: #218838
-
-// Media queries for responsiveness
-@media (max-width: 768px)
-  .form-row
-    flex-direction: column
-
-  .form-column
-    flex-direction: column
-    align-items: flex-start
-
-    > *
-      margin-bottom: 10px
-      width: 100%
+  .column-section
+        display: flex
+        margin-bottom: 15px
+        flex-direction: row
 
+  .row-section
+    padding: 20px