chore: drill down on a few responsive issues

Author: hasjack

src/components/Docs/Docs.style.ts

@@ -12,7 +12,7 @@ export const Section = styled.section`
     background: #fff;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    h2, h3, details, summary {
+    h2, h3 {
         margin-bottom: 14px; 
     }
 `
@@ -46,8 +46,4 @@ export const Warning = styled.div`
     border-radius: 4px;
     color: #cc0000;
     font-weight: 500;
-`
-
-export const FAQ = styled.div`
-    margin-top: 15px;
 `

src/components/Docs/Docs.tsx

@@ -69,36 +69,6 @@ const Docs: React.FC = () => {
                 </Styled.StepContent>
             </Styled.Section>
 
-            <Styled.Section>
-                <h2>Troubleshooting</h2>
-                <Styled.FAQ>
-                    <details>
-                        <summary>Transaction Failed</summary>
-                        <ul>
-                            <li>Verify you have sufficient ETH for gas</li>
-                            <li>Ensure you're on Ethereum Mainnet</li>
-                            <li>Try increasing gas price slightly</li>
-                        </ul>
-                    </details>
-                    <details>
-                        <summary>Authorization Not Showing</summary>
-                        <ul>
-                            <li>Confirm you're using the correct Dapper wallet address</li>
-                            <li>Wait for transaction confirmation (may take a few minutes)</li>
-                            <li>Try refreshing the page</li>
-                        </ul>
-                    </details>
-                    <details>
-                        <summary>Wallet Connection Issues</summary>
-                        <ul>
-                            <li>Ensure only one wallet extension is active</li>
-                            <li>Clear browser cache and reload</li>
-                            <li>Check network connection</li>
-                        </ul>
-                    </details>
-                </Styled.FAQ>
-            </Styled.Section>
-
             {/* <Styled.Section>
                 <h2>Additional Options</h2>
                 <p>

src/components/Header/Header.tsx

@@ -8,7 +8,8 @@ const Header: React.FC<AuthProps> = ({ loggedIn, handleSignIn, handleSignOut, is
             <h1>
                 <Link to={'/'}>
                     <img src={`${BASE_URL}/dapper-wallet.png`} alt="Dapper Labs" />
-                    {'Dapper Legacy Wallet Support App'}
+                    <span>{'Dapper Legacy Wallet Support App'}</span>
+                    <span className={'mobile'}>{'DLW Support App'}</span>
                 </Link>
             </h1>
             {loggedIn ? (

src/style/index.ts

@@ -20,6 +20,20 @@ export const Header = styled.header`
                 width: 48px;
                 margin-right: 16px;
             }
+            > span {
+                font-size: 18px;
+                display: none;
+                @media (min-width: ${breaks['md']}) {
+                    font-size: 24px;
+                    display: inline;
+                }
+                &.mobile {
+                    display: inline;
+                    @media (min-width: ${breaks['md']}) {
+                        display: none;
+                    }
+                } 
+            }
         }
     }
     > button {
@@ -114,6 +128,7 @@ export const Main = styled.main`
         width: 100%;
         font-size: ${fontSize['lg']};
         margin-bottom: ${gutters['md']};
+        box-sizing: border-box;
     }
     input[type='text'], textarea {
         max-width: 620px;