added some css adjustments

Author: akramcodez

static/css/components/reading-goal.less

@@ -5,13 +5,16 @@
   flex-direction: column;
   gap: 10px;
   text-align: center;
+  width: 100%;
+  box-sizing: border-box;
 
   &__question {
     display: flex;
     flex-direction: row;
     gap: 8px;
     align-items: center;
     justify-content: center;
+    flex-wrap: wrap;
 
     span {
       font-weight: 500;
@@ -29,8 +32,31 @@
     justify-content: flex-end;
     align-items: center;
     gap: 15px;
-    padding-right: 5px;
     width: 100%;
+    box-sizing: border-box;
+
+    input {
+      width: 100px;
+      padding: 10px 14px;
+      font-size: @font-size-label-large;
+      text-align: center;
+      border: 2px solid @lighter-grey;
+      border-radius: 4px;
+      outline: none;
+
+      &:focus {
+        border-color: @primary-blue;
+        box-shadow: 0 0 0 2px fade(@primary-blue, 20%);
+      }
+    }
+
+    button {
+      display: inline-block;
+      width: fit-content;
+      margin: 0;
+      padding: 9px 20px;
+      font-size: @font-size-label-large;
+    }
   }
 
   &__note {
@@ -41,60 +67,55 @@
   }
 }
 
-.goal-form__input-section input {
-  width: 100px;
-  padding: 10px 14px;
-  font-size: @font-size-label-large;
-  text-align: center;
-  border: 2px solid @lighter-grey;
-  border-radius: 4px;
-  outline: none;
-}
-
-.goal-form__input-section input:focus {
-  border-color: @primary-blue;
-  box-shadow: 0 0 0 2px fade(@primary-blue, 20%);
-}
-
-.goal-form__input-section button {
-  display: inline-block;
-  width: fit-content;
-  margin: 0;
-  padding: 9px 20px;
-  font-size: @font-size-label-large;
-}
-
-// Responsive design for smaller screens
 @media only screen and (max-width: @width-breakpoint-tablet) {
   .goal-form {
     gap: 12px;
 
-    &__question {
-      gap: 8px;
+    &__question span {
+      font-size: @font-size-label-medium;
+    }
+
+    &__input-section {
+      gap: 10px;
+      justify-content: center;
+      padding: 0 10px;
 
-      span {
+      input {
+        width: 70px;
+        padding: 8px 10px;
         font-size: @font-size-label-medium;
       }
-    }
 
-    &__input-section {
-      gap: 12px;
-      align-items: center;
-      justify-content: flex-end;
-      padding-right: 15px;
+      button {
+        padding: 8px 12px;
+        font-size: @font-size-label-medium;
+      }
     }
   }
+}
 
-  // Flattened responsive selectors
-  .goal-form__input-section input {
-    width: 80px;
-    padding: 8px 12px;
-    font-size: @font-size-label-medium;
-  }
+@media only screen and (max-width: 480px) {
+  .goal-form {
+    &__question {
+      flex-direction: column;
+      gap: 6px;
+    }
 
-  .goal-form__input-section button {
-    padding: 8px 16px;
-    font-size: @font-size-label-medium;
+    &__input-section {
+      gap: 8px;
+      padding: 0 5px;
+
+      input {
+        width: 60px;
+        padding: 6px 8px;
+        font-size: @font-size-label-small;
+      }
+
+      button {
+        padding: 6px 10px;
+        font-size: @font-size-label-small;
+      }
+    }
   }
 }
 
@@ -111,9 +132,8 @@
     background-color: @light-grey;
     border-radius: 5px;
     height: 20px;
-    margin: auto;
+    margin: 0 auto 10px;
     width: 85%;
-    margin-bottom: 10px;
   }
 
   &__completed {
@@ -136,10 +156,7 @@
     padding: 15px 0 0;
 
     &__details {
-      display: flex;
-      justify-content: space-between;
       width: 85%;
-      margin: auto;
     }
   }
-}
+}