Refactor layout for add goal button and modal

Simplified the structure by removing unnecessary row and column wrappers around the add goal button and modal in SettingsUserGoals.vue. This change streamlines the component's layout and improves readability aligning with the rest of the code.

frontend/app/src/components/Settings/SettingsUserGoals.vue

@@ -1,26 +1,22 @@
 <template>
   <div class="col">
     <div class="bg-body-tertiary rounded p-3 shadow-sm">
-      <div class="row row-gap-3">
-        <div class="col-lg-4 col-md-12">
-          <!-- add goal button -->
-          <a
-            class="w-100 btn btn-primary"
-            href="#"
-            role="button"
-            data-bs-toggle="modal"
-            data-bs-target="#addGoalModal"
-            >{{ $t('settingsUserGoalsZone.addNewGoal') }}</a
-          >
+      <!-- add goal button -->
+      <a
+        class="w-100 btn btn-primary"
+        href="#"
+        role="button"
+        data-bs-toggle="modal"
+        data-bs-target="#addGoalModal"
+        >{{ $t('settingsUserGoalsZone.addNewGoal') }}</a
+      >
 
-          <!-- Modal goal user -->
-          <GoalsAddEditGoalModalComponent
-            :action="'add'"
-            @createdGoal="addGoalList"
-            @isLoadingNewGoal="setIsLoadingNewGoal"
-          />
-        </div>
-      </div>
+      <!-- Modal goal user -->
+      <GoalsAddEditGoalModalComponent
+        :action="'add'"
+        @createdGoal="addGoalList"
+        @isLoadingNewGoal="setIsLoadingNewGoal"
+      />
 
       <!-- loading state -->
       <LoadingComponent class="mt-3" v-if="isLoading" />