fix select bridge

src/widgets/bridge-form/ui/NetworkSelect.module.css

@@ -0,0 +1,21 @@
+.wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 4px;
+  margin-bottom: 8px;
+}
+
+.label {
+  font-size: 12px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  font-weight: 700;
+  min-width: 20px;
+}
+
+/* Ограничиваем ширину селекта, чтобы он не растягивался на весь блок. */
+.select {
+  width: 130px;
+}

src/widgets/bridge-form/ui/NetworkSelect.tsx

@@ -1,4 +1,5 @@
 import { Select } from '@shared/ui'
+import styles from './NetworkSelect.module.css'
 
 interface Props {
   label: string
@@ -9,11 +10,15 @@ interface Props {
 
 export function NetworkSelect({ label, value, onChange, options }: Props) {
   return (
-    <Select
-      label={label}
-      value={value}
-      onChange={onChange}
-      options={options.map(o => ({ value: o, label: o }))}
-    />
+    <div className={styles.wrap}>
+      <span className={styles.label}>{label}</span>
+      <div className={styles.select}>
+        <Select
+          value={value}
+          onChange={onChange}
+          options={options.map(o => ({ value: o, label: o }))}
+        />
+      </div>
+    </div>
   )
 }

src/widgets/networks-table/ui/NetworksTable.module.css

@@ -109,7 +109,15 @@
 
 .speedFill {
   height: 100%;
+  width: 0;
   border-radius: 999px;
+  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .speedFill {
+    transition: none;
+  }
 }
 
 .fee {

src/widgets/networks-table/ui/NetworksTable.tsx

@@ -1,9 +1,31 @@
+import { useEffect, useRef, useState } from 'react'
 import { NETWORKS } from '../model/networks'
 import styles from './NetworksTable.module.css'
 
 export function NetworksTable() {
+  const sectionRef = useRef<HTMLElement>(null)
+  const [animated, setAnimated] = useState(false)
+
+  useEffect(() => {
+    const el = sectionRef.current
+    if (!el) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          setAnimated(true)
+          observer.disconnect()
+        }
+      },
+      { threshold: 0.3 },
+    )
+
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
   return (
-    <section className={styles.section}>
+    <section ref={sectionRef} className={styles.section}>
       <div className={styles.wrap}>
         <h2 className={styles.title}>Поддерживаемые сети</h2>
         <div className={styles.tableWrap}>
@@ -30,7 +52,7 @@ export function NetworksTable() {
                     <div className={styles.speedBar}>
                       <div
                         className={styles.speedFill}
-                        style={{ width: `${n.speed}%`, background: n.color }}
+                        style={{ width: animated ? `${n.speed}%` : '0%', background: n.color }}
                       />
                     </div>
                   </td>