Views: Base-configuration: Add small screen breakpoints and styles

Signed-off-by: Arturo Manzoli <[email protected]>

src/views/BaseConfigurationView.vue

@@ -1,11 +1,20 @@
 <template>
-  <v-card class="elevation-0">
-    <v-card-title class="flex-centered mt-2">
+  <div class="bg-transparent text-white px-[1vw] pb-[2vh]">
+    <div class="absolute top-0 right-0 py-2 pr-3">
+      <slot name="help-icon"></slot>
+    </div>
+    <div
+      class="font-semibold flex-centered mt-3"
+      :style="{ fontSize: interfaceStore.isOnSmallScreen ? '16px' : '20px' }"
+    >
       <slot name="title"></slot>
-    </v-card-title>
-    <v-divider />
-    <v-card-text class="flex-centered flex-column">
+    </div>
+    <div class="flex-center flex-column">
       <slot name="content"></slot>
-    </v-card-text>
-  </v-card>
+    </div>
+  </div>
 </template>
+<script setup lang="ts">
+import { useAppInterfaceStore } from '@/stores/appInterface'
+const interfaceStore = useAppInterfaceStore()
+</script>