improve responsiveness of header

src/components/Header/index.tsx

@@ -46,10 +46,8 @@ const HeaderFrame = styled.div`
   background-color: ${({ theme }) => theme.bg0};
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
-    grid-template-columns: 1fr;
+    display: flex;
     padding: 0 1rem;
-    width: calc(100%);
-    position: relative;
   `};
 
   ${({ theme }) => theme.mediaWidth.upToExtraSmall`

src/hooks/useWrapCallback.ts

@@ -34,6 +34,7 @@ export default function useWrapCallback(
   return useMemo(() => {
     if (!wethContract || !chainId || !inputCurrency || !outputCurrency) return NOT_APPLICABLE
 
+    const hasInputAmount = Boolean(inputAmount?.greaterThan('0'))
     const sufficientBalance = inputAmount && balance && !balance.lessThan(inputAmount)
 
     if (inputCurrency === ETHER && currencyEquals(WETH9[chainId], outputCurrency)) {
@@ -50,7 +51,7 @@ export default function useWrapCallback(
                 }
               }
             : undefined,
-        inputError: sufficientBalance ? undefined : 'Insufficient ETH balance',
+        inputError: sufficientBalance ? undefined : hasInputAmount ? 'Insufficient ETH balance' : 'Enter ETH amount',
       }
     } else if (currencyEquals(WETH9[chainId], inputCurrency) && outputCurrency === ETHER) {
       return {
@@ -66,7 +67,7 @@ export default function useWrapCallback(
                 }
               }
             : undefined,
-        inputError: sufficientBalance ? undefined : 'Insufficient WETH balance',
+        inputError: sufficientBalance ? undefined : hasInputAmount ? 'Insufficient WETH balance' : 'Enter WETH amount',
       }
     } else {
       return NOT_APPLICABLE

src/pages/App.tsx

@@ -50,7 +50,7 @@ const BodyWrapper = styled.div`
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     padding: 16px;
-    padding-top: 2rem;
+    padding-top: 6rem;
   `};
 `
 

src/pages/Swap/index.tsx

@@ -94,7 +94,6 @@ export default function Swap({ history }: RouteComponentProps) {
     parsedAmount,
     currencies,
     inputError: swapInputError,
-    // v3Trade,
   } = useDerivedSwapInfo()
 
   const { wrapType, execute: onWrap, inputError: wrapInputError } = useWrapCallback(