Improve asset stats scroll (#845)

Author: zerts

src/ui/pages/AssetInfo/AssetGlobalStats.tsx

@@ -5,6 +5,7 @@ import { formatCurrencyValue } from 'src/shared/units/formatCurrencyValue';
 import { formatPercent } from 'src/shared/units/formatPercent';
 import { HStack } from 'src/ui/ui-kit/HStack';
 import { UIText } from 'src/ui/ui-kit/UIText';
+import * as styles from './styles.module.css';
 
 const ONE_DAY = 24 * 60 * 60 * 1000;
 const ONE_HOUR = 60 * 60 * 1000;
@@ -57,7 +58,7 @@ export function AssetGlobalStats({
   );
 
   return (
-    <HStack gap={8} style={{ width: '100%', overflowX: 'auto' }}>
+    <HStack gap={8} className={styles.statsContainer}>
       {createdRecently ? (
         <AssetStatsChip title="AGE" value={`${ageInHours}h`} />
       ) : null}

src/ui/pages/AssetInfo/styles.module.css

@@ -65,3 +65,17 @@
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
+
+.statsContainer {
+  width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
+  user-select: none; /* Prevent text selection during drag */
+}
+
+/* Hide scrollbar for Webkit browsers */
+.statsContainer::-webkit-scrollbar {
+  display: none;
+}