Fix : content area collapses on short viewports, TopBar overflows at 320px, pagination buttons below 44px touch target

eslint.config.js

@@ -3,23 +3,31 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
 
-export default defineConfig([
-  globalIgnores(['dist']),
+export default tseslint.config(
+  {
+    ignores: ['dist'],
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
   {
     files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
     languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
       globals: globals.browser,
     },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
     rules: {
       '@typescript-eslint/no-explicit-any': 'off',
+      ...reactHooks.configs.recommended.rules,
     },
-  },
-])
+  }
+)

package.json

@@ -29,7 +29,7 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest run",
-    "test:exports": "tsc --noEmit src/verify-exports.ts"
+    "test:exports": "tsc -p tsconfig.test-exports.json"
   },
   "dependencies": {
     "@hugeicons/core-free-icons": "^4.1.2",

src/components/NetworkSwitcher.tsx

@@ -33,12 +33,12 @@ export function NetworkSwitcher() {
       <DropdownMenu.Trigger asChild>
         <button
           disabled={isSwitching}
-          className="inline-flex items-center gap-2 h-8 px-3.5 rounded-lg bg-surface-2 border border-line hover:border-line-2 transition-colors cursor-pointer text-[12px] text-ink-2 focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+          className="inline-flex items-center gap-1.5 sm:gap-2 h-8 px-2 sm:px-3.5 rounded-lg bg-surface-2 border border-line hover:border-line-2 transition-colors cursor-pointer text-[12px] text-ink-2 focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
         >
           <span
             className={cn("w-1.5 h-1.5 rounded-full shrink-0", current.dot)}
           />
-          {current.label}
+          <span className="hidden sm:inline">{current.label}</span>
           {isSwitching ? (
             <span className="ml-0.5 h-3 w-3 animate-spin rounded-full border-2 border-ink-2 border-t-transparent" />
           ) : (

src/components/TopBar.tsx

@@ -36,7 +36,7 @@ export function TopBar({
           </button>
         </div>
       )}
-      <header className="flex items-center justify-between px-6 h-[60px] border-b border-line bg-surface shrink-0">
+      <header className="flex items-center justify-between px-4 sm:px-6 h-[60px] border-b border-line bg-surface shrink-0">
         <div className="flex items-center gap-3">
           <button
             onClick={onMenuToggle}

src/components/TransactionHistory.tsx

@@ -161,6 +161,7 @@ export function TransactionHistory() {
                 <Button
                   variant="secondary"
                   size="sm"
+                  className="min-h-[44px] sm:min-h-0"
                   disabled={page <= 1}
                   onClick={() => setPage((p) => p - 1)}
                 >
@@ -175,6 +176,7 @@ export function TransactionHistory() {
                 <Button
                   variant="secondary"
                   size="sm"
+                  className="min-h-[44px] sm:min-h-0"
                   disabled={page >= totalPages}
                   onClick={() => setPage((p) => p + 1)}
                 >

src/components/WalletConnectButton.tsx

@@ -15,19 +15,26 @@ export function WalletConnectButton({
     return (
       <button
         onClick={onOpenModal}
+        className="inline-flex items-center gap-1.5 sm:gap-2 h-8 px-2 sm:px-3.5 rounded-lg bg-surface-2 border border-line hover:border-line-2 transition-colors cursor-pointer"
         aria-label={`Wallet connected: ${address}. Click to manage.`}
-        className="inline-flex items-center gap-2 h-8 px-3.5 rounded-lg bg-surface-2 border border-line hover:border-line-2 transition-colors cursor-pointer"
       >
         <span className="w-2 h-2 rounded-full bg-green shrink-0" />
-        <span data-address>{truncateAddress(address)}</span>
+        <span data-address className="hidden sm:inline">{truncateAddress(address)}</span>
       </button>
     );
   }
 
   return (
     <div className="relative flex flex-col items-end">
-      <Button size="md" loading={isConnecting} onClick={connectWallet}>
-        {isConnecting ? "Connecting…" : "Connect Wallet"}
+      <Button
+        size="md"
+        loading={isConnecting}
+        onClick={connectWallet}
+        className="px-2.5 sm:px-4"
+        aria-label={isConnecting ? "Connecting…" : "Connect Wallet"}
+      >
+        <span className="hidden sm:inline">{isConnecting ? "Connecting…" : "Connect Wallet"}</span>
+        <span className="sm:hidden">{isConnecting ? "…" : "Connect"}</span>
       </Button>
       {!isConnected && error && (
         <div className="absolute top-[calc(100%+8px)] right-0 z-50 flex items-center gap-2 px-3 py-1.5 bg-surface border border-[rgba(239,68,68,0.15)] rounded-lg shadow-lg text-red text-[11px] whitespace-nowrap animate-in fade-in slide-in-from-top-1 duration-200">
@@ -49,4 +56,3 @@ export function WalletConnectButton({
     </div>
   );
 }
-

src/screens/Dashboard.tsx

@@ -36,8 +36,8 @@ export function Dashboard() {
           onMenuToggle={() => setSidebarOpen((o) => !o)}
         />
         <NetworkBanner />
-        <main className="flex-1 overflow-y-auto">
-          <div className="max-w-[700px] mx-auto px-6 py-8 sm:px-10 sm:py-10">
+        <main className="flex-1 min-h-0 overflow-y-auto">
+          <div className="max-w-[700px] mx-auto px-6 py-8 sm:px-10 sm:py-10 min-h-[300px]">
             <ActiveScreen />
           </div>
         </main>

src/verify-exports.ts

@@ -7,13 +7,13 @@ import {
   AssetPill,
   ContractEventFeed,
   // Types
-  AccountData,
-  Balance,
-  Transaction,
-  ClaimableBalance,
-  ContractEvent,
-  NetworkInfo,
-  InvokeParams,
+  type AccountData,
+  type Balance,
+  type Transaction,
+  type ClaimableBalance,
+  type ContractEvent,
+  type NetworkInfo,
+  type InvokeParams,
 } from "./components/index";
 
 // Dummy usage to prevent unused warnings if strictly checked

tsconfig.test-exports.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "files": ["src/verify-exports.ts"],
+  "include": []
+}