feat: enhance data usage column display and add nowrap to connected node column

- Added nowrap property to the connected node column for improved layout.
- Updated data usage column to display strategy and lifetime used traffic more clearly, including conditional formatting for total used traffic.

Author: kastov

src/entities/dashboard/users/ui/table-columns/connected-node/connected-node.column.tsx

@@ -14,6 +14,7 @@ export function ConnectedNodeColumnEntity(props: IProps) {
                 flex: 1,
                 minWidth: 0
             }}
+            wrap="nowrap"
         >
             {lastConnectedNode?.countryCode && lastConnectedNode.countryCode !== 'XX' && (
                 <ReactCountryFlag

src/entities/dashboard/users/ui/table-columns/data-usage/data-usage.column.tsx

@@ -29,25 +29,32 @@ export function DataUsageColumnEntity(props: IProps) {
             <Group justify="space-between">
                 <Text c="red.5" fw={700} fz="xs">
                     {usedTrafficPercentage.toFixed(2)}%
+                    <Text c="dimmed" component="span" fz="xs">
+                        {' '}
+                        {strategy}
+                    </Text>
                 </Text>
                 <Text c="teal.5" fw={700} fz="xs">
+                    <Text c="dimmed" component="span" fw={550} fz="xs" size="xs">
+                        Σ {lifetimeUsedTraffic}
+                    </Text>{' '}
                     {(100 - usedTrafficPercentage).toFixed(2)}%
                 </Text>
             </Group>
             <Progress
                 color={usedTrafficPercentage > 100 ? 'orange.7' : 'teal.9'}
                 radius="xs"
                 size="md"
-                striped
                 value={usedTrafficPercentage}
             />
 
             <Group gap="xs" justify="space-between" mt={2}>
-                <Text c="dimmed" fw={'550'} size="xs">
-                    {totalUsedTraffic} {limitBytes === '0' ? '' : `/ ${limitBytes}`} {strategy}
+                <Text c="dimmed" fw={550} size="xs">
+                    {totalUsedTraffic === '0' ? '0 GiB' : totalUsedTraffic}
                 </Text>
-                <Text c="dimmed" fw={'550'} size="xs">
-                    Σ {lifetimeUsedTraffic}
+
+                <Text c="dimmed" fw={550} size="xs">
+                    {limitBytes === '0' ? '∞' : `${limitBytes}`}
                 </Text>
             </Group>
         </Box>