Merge pull request #1682 from mars-protocol/develop

v3.0.2

Author: linkielink

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mars-v2-frontend",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "homepage": "./",
   "private": false,
   "license": "SEE LICENSE IN LICENSE FILE",
@@ -79,8 +79,8 @@
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.throttle": "^4.1.9",
     "@types/node": "^24.5.2",
-    "@types/react": "19.1.13",
-    "@types/react-dom": "19.1.9",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
     "@types/react-helmet": "^6.1.11",
     "@typescript-eslint/eslint-plugin": "^8.44.1",
     "@typescript-eslint/parser": "^8.44.1",

src/components/common/Grid/GridWithSplitters.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { isMobile } from 'react-device-detect'
 
 interface Props {
   className?: string
@@ -8,7 +9,8 @@ interface Props {
   bottomArea: ReactNode
 }
 
-export default function GridWithSplitters({ className, chartArea, rightArea, bottomArea }: Props) {
+// Desktop layout component with full grid and drag functionality
+function DesktopGridLayout({ className, chartArea, rightArea, bottomArea }: Props) {
   const [chartWidthPercent, setChartWidthPercent] = useState(75) // Chart takes 75% width
   const [chartHeightPercent, setChartHeightPercent] = useState(75) // Chart takes 75% height
   const [isDragging, setIsDragging] = useState<'vertical' | 'horizontal' | null>(null)
@@ -141,15 +143,8 @@ export default function GridWithSplitters({ className, chartArea, rightArea, bot
         />
       )}
 
-      {/* Mobile Layout - Stacked */}
-      <div className='flex flex-col w-full gap-1 md:hidden'>
-        <div className='bg-surface w-full'>{chartArea}</div>
-        <div className='bg-surface w-full'>{rightArea}</div>
-        <div className='bg-surface w-full'>{bottomArea}</div>
-      </div>
-
       {/* Desktop Layout - CSS Grid with Splitters */}
-      <div className='hidden md:grid w-full h-full min-h-0' style={gridStyles}>
+      <div className='grid w-full h-full min-h-0' style={gridStyles}>
         {/* Row 1, Col 1: Chart Area */}
         <div className='min-w-0 min-h-0 overflow-hidden row-start-1 row-end-2 col-start-1 col-end-2'>
           {chartArea}
@@ -214,3 +209,20 @@ export default function GridWithSplitters({ className, chartArea, rightArea, bot
     </div>
   )
 }
+
+// Mobile layout - stacked
+function MobileGridLayout({ className, chartArea, rightArea, bottomArea }: Props) {
+  return (
+    <div className={classNames('w-full', className)}>
+      <div className='flex flex-col w-full gap-1'>
+        <div className='bg-surface w-full'>{chartArea}</div>
+        <div className='bg-surface w-full'>{rightArea}</div>
+        <div className='bg-surface w-full'>{bottomArea}</div>
+      </div>
+    </div>
+  )
+}
+
+export default function GridWithSplitters(props: Props) {
+  return isMobile ? <MobileGridLayout {...props} /> : <DesktopGridLayout {...props} />
+}

src/components/common/LeverageSlider/InputOverlay.tsx

@@ -23,6 +23,7 @@ function InputOverlay({ max, value, marginThreshold, type, min }: Props) {
   const markPosPercent = Math.max(0, Math.min(100, 100 / (max / (marginThreshold ?? 1))))
   const markPadRight = (markPosPercent / 100) * THUMB_WIDTH
   const hasPastMarginThreshold = marginThreshold ? value >= marginThreshold : undefined
+  const isMarginNearMax = markPosPercent > 85
 
   return (
     <>
@@ -49,7 +50,12 @@ function InputOverlay({ max, value, marginThreshold, type, min }: Props) {
             style={{ left: `calc(${markPosPercent}% - ${markPadRight}px)` }}
           >
             <div className='w-1 h-1 bg-white rounded-full' />
-            <div className='absolute top-2.5 flex-col text-xs w-[33px] items-center flex'>
+            <div
+              className={classNames(
+                'absolute top-2.5 flex flex-col items-center text-xs w-[33px]',
+                isMarginNearMax && 'pt-4',
+              )}
+            >
               <VerticalThreeLine className='h-2 w-[1px]' />
               <div className={!hasPastMarginThreshold ? 'opacity-50' : 'opacity-100'}>Margin</div>
             </div>

src/components/perps/PerpsInfo/index.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import DisplayCurrency from 'components/common/DisplayCurrency'
 import Divider from 'components/common/Divider'
 import { FormattedNumber } from 'components/common/FormattedNumber'
@@ -65,7 +66,7 @@ export function PerpsInfo() {
   if (!market) return null
 
   return (
-    <div className='flex flex-wrap items-center gap-2 mb-2 md:gap-4 sm:mb-0'>
+    <div className='flex flex-wrap items-center justify-between gap-2 mb-2 md:gap-4 sm:mb-0'>
       {items.map((item, index) => (
         <React.Fragment key={index}>
           {item}
@@ -86,7 +87,12 @@ interface InfoItemProps {
 
 function InfoItem(props: InfoItemProps) {
   return (
-    <div className={`flex flex-col gap-1 min-w-30 ${props.className || ''}`}>
+    <div
+      className={classNames(
+        'flex flex-col gap-1 w-[calc(50%-0.25rem)] md:w-auto md:min-w-30',
+        props.className,
+      )}
+    >
       <Text size='xs' className='text-white/40'>
         {props.label}
       </Text>