fix: removed default padding from settings page

frontend/src/components/SectionFields.vue

@@ -136,7 +136,7 @@ const _fields = computed(() => {
   let all_fields = []
   props.fields?.forEach((field) => {
     let df = field.all_properties
-    if (df.depends_on) evaluate_depends_on(df.depends_on, field)
+    if (df?.depends_on) evaluate_depends_on(df.depends_on, field)
     all_fields.push(field)
   })
   return all_fields

frontend/src/components/Settings/ProfileSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="profile" class="flex w-full items-center justify-between">
+  <div v-if="profile" class="flex w-full items-center justify-between p-12 pt-14">
     <div class="flex items-center gap-4">
       <Avatar
         class="!size-16"

frontend/src/components/Settings/SettingsModal.vue

@@ -40,7 +40,7 @@
             />
           </nav>
         </div>
-        <div class="flex flex-1 flex-col overflow-y-auto p-8">
+        <div class="flex flex-1 flex-col overflow-y-auto">
           <component :is="activeTab.component" v-if="activeTab" />
         </div>
       </div>

frontend/src/components/Settings/SettingsPage.vue

@@ -3,10 +3,10 @@
     <h2 class="flex gap-2 text-xl font-semibold leading-none">
       <div>{{ __(doctype) }}</div>
       <Badge
+        v-if="data.isDirty"
         :label="__('Not Saved')"
         variant="subtle"
         theme="orange"
-        v-if="data.isDirty"
       />
     </h2>
     <div v-if="!data.get.loading" class="flex-1 overflow-y-auto">
@@ -17,7 +17,7 @@
       />
     </div>
     <div v-else class="flex flex-1 items-center justify-center">
-      <Spinner />
+      <Spinner class="size-8" />
     </div>
     <div class="flex flex-row-reverse">
       <Button
@@ -31,7 +31,12 @@
 </template>
 <script setup>
 import Fields from '@/components/Fields.vue'
-import { createDocumentResource, createResource, Spinner, Badge } from 'frappe-ui'
+import {
+  createDocumentResource,
+  createResource,
+  Spinner,
+  Badge,
+} from 'frappe-ui'
 import { computed } from 'vue'
 
 const props = defineProps({

frontend/src/components/Settings/TwilioSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <SettingsPage doctype="Twilio Settings" />
+  <SettingsPage doctype="Twilio Settings" class="p-8" />
 </template>
 <script setup>
 import SettingsPage from '@/components/Settings/SettingsPage.vue'

frontend/src/components/Settings/WhatsAppSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <SettingsPage doctype="WhatsApp Settings" />
+  <SettingsPage doctype="WhatsApp Settings" class="p-8" />
 </template>
 <script setup>
 import SettingsPage from '@/components/Settings/SettingsPage.vue'