Faro & grafana improvements 2

apps/frontend-mobile/app/(tabs)/profile.tsx

@@ -818,6 +818,9 @@ const styles = StyleSheet.create({
     color: colors.text,
     marginTop: spacing.lg,
   },
+  authTitleTablet: {
+    fontSize: 32,
+  },
   authSubtitle: {
     fontSize: 16,
     color: colors.textSecondary,
@@ -825,11 +828,18 @@ const styles = StyleSheet.create({
     marginTop: spacing.sm,
     marginBottom: spacing.xl,
   },
+  authSubtitleTablet: {
+    fontSize: 18,
+    maxWidth: 400,
+  },
   avatarSection: {
     alignItems: 'center',
     padding: spacing.xl,
     backgroundColor: colors.card,
   },
+  avatarSectionTablet: {
+    paddingVertical: spacing.xxl,
+  },
   avatarContainer: {
     width: 100,
     height: 100,
@@ -839,11 +849,21 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     overflow: 'hidden',
   },
+  avatarContainerTablet: {
+    width: 140,
+    height: 140,
+    borderRadius: 70,
+  },
   avatarImage: {
     width: 100,
     height: 100,
     borderRadius: 50,
   },
+  avatarImageTablet: {
+    width: 140,
+    height: 140,
+    borderRadius: 70,
+  },
   avatarOverlay: {
     position: 'absolute',
     top: 0,
@@ -866,6 +886,11 @@ const styles = StyleSheet.create({
     marginTop: spacing.sm,
     gap: spacing.md,
   },
+  infoSectionTablet: {
+    maxWidth: 600,
+    alignSelf: 'center',
+    width: '100%',
+  },
   infoCard: {
     backgroundColor: colors.surfaceLow,
     padding: spacing.md,
@@ -890,6 +915,11 @@ const styles = StyleSheet.create({
     marginTop: spacing.sm,
     backgroundColor: colors.card,
   },
+  menuSectionTablet: {
+    maxWidth: 600,
+    alignSelf: 'center',
+    width: '100%',
+  },
   menuItem: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -936,11 +966,18 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.md,
     paddingHorizontal: spacing.xl,
   },
+  buttonTablet: {
+    paddingVertical: spacing.lg,
+    paddingHorizontal: spacing.xl * 1.5,
+  },
   buttonText: {
     color: colors.textInverse,
     fontSize: 16,
     fontWeight: '600',
   },
+  buttonTextTablet: {
+    fontSize: 18,
+  },
   linkButton: {
     marginTop: spacing.md,
   },
@@ -959,6 +996,11 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: colors.danger,
   },
+  logoutButtonTablet: {
+    maxWidth: 600,
+    alignSelf: 'center',
+    width: '100%',
+  },
   logoutText: {
     marginLeft: spacing.sm,
     color: colors.danger,