diff --git a/apps/mobile/src/screens/WorkspaceSettingsView.tsx b/apps/mobile/src/screens/WorkspaceSettingsView.tsx index cc4203ad..ece1a4e5 100644 --- a/apps/mobile/src/screens/WorkspaceSettingsView.tsx +++ b/apps/mobile/src/screens/WorkspaceSettingsView.tsx @@ -66,6 +66,7 @@ type MobileSystemInfoItem = { fullWidth?: boolean; label: string; localOnly?: boolean; + mono?: boolean; value: string; }; @@ -481,18 +482,12 @@ const MobileSystemInfoSection = ({ group }: { group: MobileSystemInfoGroup }) => ) : null} - {layoutMobileSystemInfoRows(group.items, 3).map((rowItems, rowIndex, rows) => ( - - {rowItems.map((item, itemIndex) => ( - + {layoutMobileSystemInfoRows(group.items, 3).map((rowItems, rowIndex) => ( + + {rowItems.map((item) => ( + {item.label} - {item.value} + {item.value} ))} @@ -721,12 +716,12 @@ const getMobileSystemInfoGroups = ( ...(diagnostics.instanceUrl ? [{ fullWidth: true, label: copy.instanceUrl, localOnly: true, value: diagnostics.instanceUrl }] : []), - { label: copy.instanceVersion, value: instance?.version ? `v${instance.version.replace(/^v/, "")}` : copy.unknown }, - { label: copy.databaseVersion, value: instance?.health.migration || copy.unknown }, + { label: copy.instanceVersion, mono: true, value: instance?.version ? `v${instance.version.replace(/^v/, "")}` : copy.unknown }, + { label: copy.databaseVersion, mono: true, value: instance?.health.migration || copy.unknown }, { label: copy.databaseBackend, value: getMobileDatabaseBackend(instance?.health.storage?.database, copy.unknown) }, { label: copy.deploymentPlatform, value: getMobileDeploymentPlatform(instance?.health.runtime, english) }, - { fullWidth: true, label: copy.instanceBuild, value: instance?.health.build || copy.unknown }, - { fullWidth: true, label: copy.newUploadObjectStorage, value: getMobileObjectStorage(instance?.health, english, copy.unknown) }, + { label: copy.instanceBuild, mono: true, value: instance?.health.build || copy.unknown }, + { label: copy.newUploadObjectStorage, value: getMobileObjectStorage(instance?.health, english, copy.unknown) }, ...(instance?.health.objectStorageProvider === "s3" ? [{ fullWidth: true, label: copy.existingAttachments, value: copy.existingAttachmentsOriginalStorage }] : []), @@ -740,14 +735,15 @@ const getMobileSystemInfoGroups = ( description: copy.clientDescription, id: "client", items: [ - { label: copy.version, value: `v${MOBILE_APP_VERSION}` }, + { label: copy.version, mono: true, value: `v${MOBILE_APP_VERSION}` }, { label: copy.build, value: __DEV__ ? copy.developmentBuild : copy.productionBuild }, { label: copy.client, value: copy.mobileApp }, { label: copy.platform, value: platformName }, - { label: copy.platformVersion, value: Platform.OS === "android" ? `${Platform.constants.Release} (API ${Platform.Version})` : String(Platform.Version) }, - { fullWidth: true, label: copy.deviceModel, value: readMobileDeviceModel() || copy.unknown }, + { label: copy.platformVersion, mono: true, value: Platform.OS === "android" ? `${Platform.constants.Release} (API ${Platform.Version})` : String(Platform.Version) }, + { label: copy.deviceModel, value: readMobileDeviceModel() || copy.unknown }, { fullWidth: true, + mono: true, label: copy.screenResolution, value: formatClientDisplaySize(toDevicePixelScreenSize({ devicePixelRatio: PixelRatio.get(), @@ -755,8 +751,8 @@ const getMobileSystemInfoGroups = ( screenWidth: Dimensions.get("screen").width, }), copy.screenResolutionValue) || copy.unknown, }, - { label: copy.language, value: localePreference === "system" ? `${resolvedLocale} (${copy.followSystem})` : resolvedLocale }, - { label: copy.timeZone, value: Intl.DateTimeFormat().resolvedOptions().timeZone || copy.unknown }, + { label: copy.language, mono: true, value: localePreference === "system" ? `${resolvedLocale} (${copy.followSystem})` : resolvedLocale }, + { label: copy.timeZone, mono: true, value: Intl.DateTimeFormat().resolvedOptions().timeZone || copy.unknown }, { label: copy.installMode, value: formatExecutionEnvironment(Constants.executionEnvironment, localePreference) }, ], title: copy.clientSection, @@ -766,9 +762,9 @@ const getMobileSystemInfoGroups = ( id: "connection", items: [ { label: copy.instanceConnection, value: connectionValue }, - { label: copy.requestLatency, value: instance ? `${instance.latencyMs} ms` : copy.unknown }, - { label: copy.pendingSync, value: pendingSync === null ? copy.unknown : String(pendingSync) }, - { label: copy.failedSync, value: failedSync === null ? copy.unknown : String(failedSync) }, + { label: copy.requestLatency, mono: true, value: instance ? `${instance.latencyMs} ms` : copy.unknown }, + { label: copy.pendingSync, mono: true, value: pendingSync === null ? copy.unknown : String(pendingSync) }, + { label: copy.failedSync, mono: true, value: failedSync === null ? copy.unknown : String(failedSync) }, ], title: copy.connectionSection, }, diff --git a/apps/mobile/src/screens/workspace-styles.ts b/apps/mobile/src/screens/workspace-styles.ts index b223bf1d..f3a696b4 100644 --- a/apps/mobile/src/screens/workspace-styles.ts +++ b/apps/mobile/src/screens/workspace-styles.ts @@ -1047,10 +1047,12 @@ const baseWorkspaceStyles = StyleSheet.create({ padding: 14, }, systemInfoRows: { + backgroundColor: "#ffffff", borderColor: "#e2e8f0", borderRadius: 8, borderWidth: 1, - overflow: "hidden", + gap: 12, + padding: 12, }, systemInfoSection: { gap: 9, @@ -1090,29 +1092,21 @@ const baseWorkspaceStyles = StyleSheet.create({ lineHeight: 15, }, systemInfoRow: { - borderBottomColor: "#e2e8f0", - borderBottomWidth: 1, flexDirection: "row", - }, - systemInfoRowLast: { - borderBottomWidth: 0, + gap: 12, }, systemInfoCell: { flex: 1, - gap: 3, minWidth: 0, - paddingHorizontal: 8, - paddingVertical: 9, - }, - systemInfoCellDivider: { - borderRightColor: "#e2e8f0", - borderRightWidth: 1, + gap: 2, }, systemInfoListValue: { color: "#0f172a", - fontFamily: "monospace", fontSize: 12, - fontWeight: "700", + fontWeight: "400", + }, + systemInfoMonoValue: { + fontFamily: "monospace", }, panelLinkRow: { alignItems: "center",