Fix: val modal scale (#210)

sigp · Aug 22, 2023 · fe7742c · fe7742c
1 parent d36ea61
commit fe7742c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 17 deletions.
diff --git a/src/components/DiagnosticTable/AlertInfo.tsx b/src/components/DiagnosticTable/AlertInfo.tsx
@@ -13,6 +13,7 @@ const AlertInfo = () => {
   const { t } = useTranslation()
   const { alerts, dismissAlert, resetDismissed } = useDiagnosticAlerts()
   const { ref, dimensions } = useDivDimensions()
+  const headerDimensions = useDivDimensions()
   const [filter, setFilter] = useState('all')
 
   const setFilterValue = (value: FilterValue) => setFilter(value)
@@ -40,15 +41,24 @@ const AlertInfo = () => {
 
   return (
     <div ref={ref} className='h-full w-full flex flex-col md:border-l-0 border-t-0 border-style500'>
-      <div className='w-full h-12 flex items-center justify-between px-4 border-l-0 border-r-0 border-style500'>
+      <div
+        ref={headerDimensions.ref}
+        className='w-full h-12 flex items-center justify-between px-4 border-l-0 border-r-0 border-style500'
+      >
         <Typography type='text-caption1' color='text-primary' darkMode='dark:text-white' isBold>
           {t('alertInfo.alerts')}
         </Typography>
         <AlertFilterSettings value={filter as FilterValue} onChange={setFilterValue} />
       </div>
       {dimensions && (
         <div
-          style={isMobile ? undefined : { maxHeight: `${dimensions.height}px` }}
+          style={
+            isMobile
+              ? undefined
+              : {
+                  maxHeight: `${dimensions.height - (headerDimensions?.dimensions?.height || 0)}px`,
+                }
+          }
           className='h-full w-full flex flex-col'
         >
           {formattedAlerts.length > 0 && (

diff --git a/src/components/ValidatorDetailTable/ValidatorDetailTable.tsx b/src/components/ValidatorDetailTable/ValidatorDetailTable.tsx
@@ -99,77 +99,77 @@ export const ValidatorDetailTable: FC<ValidatorDetailTableProps> = ({ validator
       </div>
       <div className='hidden lg:block border-t-style100 w-full'>
         <div className='w-full flex'>
-          <div className='w-20 py-4 px-6'>
+          <div className='w-20 @1600:w-28 py-4 px-6'>
             <Typography type='text-caption2' color='text-dark500' isBold isUpperCase>
               {t('balance')}
             </Typography>
           </div>
-          <div className='w-20 py-4 px-6'>
+          <div className='w-20 @1600:w-28 py-4 px-6'>
             <Typography type='text-caption2' color='text-dark500' isBold isUpperCase>
               {t('income')}
             </Typography>
           </div>
-          <div className='w-20 py-4 px-6'>
+          <div className='w-20 @1600:w-28 py-4 px-6'>
             <Typography type='text-caption2' color='text-dark500' isBold isUpperCase>
               {t('proposed')}
             </Typography>
           </div>
-          <div className='w-20 py-4 px-6'>
+          <div className='w-20 @1600:w-28 py-4 px-6'>
             <Typography type='text-caption2' color='text-dark500' isBold isUpperCase>
               {t('attested')}
             </Typography>
           </div>
-          <div className='w-20 py-4 px-6'>
+          <div className='w-20 @1600:w-28 py-4 px-6'>
             <Typography type='text-caption2' color='text-dark500' isBold isUpperCase>
               {t('aggregated')}
             </Typography>
           </div>
-          <div className='w-12 py-4 px-6'>
+          <div className='w-12 @1600:w-20 py-4 px-6'>
             <Typography type='text-caption2' color='text-dark500' isBold isUpperCase>
               {t('in')}
             </Typography>
           </div>
-          <div className='w-24 py-4 px-6'>
+          <div className='w-24 @1600:w-32 py-4 px-6'>
             <Typography type='text-caption2' color='text-dark500' isBold isUpperCase>
               {t('effectiveness')}
             </Typography>
           </div>
-          <div className='w-20 py-4 px-6'>
+          <div className='w-20 @1600:w-28 py-4 px-6'>
             <Typography type='text-caption2' color='text-dark500' isBold isUpperCase>
               Apr
             </Typography>
           </div>
         </div>
         <div className='border-t-style100 w-full flex'>
-          <div className='w-20 py-4 px-6'>
+          <div className='w-20 @1600:w-28 py-4 px-6'>
             <Typography type='text-caption1'>{balance?.toFixed(4)}</Typography>
           </div>
-          <div className='w-20 py-4 px-6'>
+          <div className='w-20 @1600:w-28 py-4 px-6'>
             <Typography type='text-caption1' color={incomeColor} darkMode={incomeColor}>
               {income.toFixed(4)}
             </Typography>
           </div>
-          <div className='w-20 py-4 px-6 opacity-20'>
+          <div className='w-20 @1600:w-28 py-4 px-6 opacity-20'>
             <Typography color='text-dark400' type='text-caption1'>
               -
             </Typography>
           </div>
-          <div className='w-20 py-4 px-6 opacity-20'>
+          <div className='w-20 @1600:w-28 py-4 px-6 opacity-20'>
             <Typography color='text-dark400' type='text-caption1'>
               -
             </Typography>
           </div>
-          <div className='w-20 py-4 px-6 opacity-20'>
+          <div className='w-20 @1600:w-28 py-4 px-6 opacity-20'>
             <Typography color='text-dark400' type='text-caption1'>
               -
             </Typography>
           </div>
-          <div className='w-12 py-4 px-6 opacity-20'>
+          <div className='w-12 @1600:w-20 py-4 px-6 opacity-20'>
             <Typography color='text-dark400' type='text-caption1'>
               -
             </Typography>
           </div>
-          <div className='w-24 py-4 px-6 opacity-20'>
+          <div className='w-24 @1600:w-32 py-4 px-6 opacity-20'>
             <Typography color='text-dark400' type='text-caption1'>
               -
             </Typography>