fix: adjust header menu and dapp layout

apps/extension/App.css

@@ -22,9 +22,29 @@
   right: 12px;
   display: flex;
   gap: 10px;
+  justify-content: flex-end;
   z-index: 1000;
 }
 
+.header-actions:has(.chain-switcher-container) {
+  left: 12px;
+  justify-content: space-between;
+}
+
+body.ring-dapp-open .header-actions .chain-switcher-trigger {
+  display: none;
+}
+
+body.ring-dapp-open .header-actions .menu-trigger {
+  display: none;
+}
+
+body.ring-dapp-open .header-actions {
+  left: auto;
+  justify-content: flex-end;
+  z-index: 2600;
+}
+
 .app:has(.card--guest) {
   align-items: flex-start;
 }

apps/extension/App.tsx

@@ -26,7 +26,7 @@ function AppContent() {
       <div className={`card ${!isLoggedIn ? 'card--guest' : ''}`}>
         {isLoggedIn && <BalanceDisplay />}
         {isLoggedIn && <TransactionActions />}
-        {isLoggedIn && <MultiTabs />}
+        {isLoggedIn && <MultiTabs onOpenSettings={() => setDrawerOpen(true)} />}
 
         {!isLoggedIn && (
           <div className="card--guest-logo-wrap">

apps/pwa/App.css

@@ -24,9 +24,29 @@
   right: 20px;
   display: flex;
   gap: 15px;
+  justify-content: flex-end;
   z-index: 1000;
 }
 
+.header-actions:has(.chain-switcher-container) {
+  left: 20px;
+  justify-content: space-between;
+}
+
+body.ring-dapp-open .header-actions .chain-switcher-trigger {
+  display: none;
+}
+
+body.ring-dapp-open .header-actions .menu-trigger {
+  display: none;
+}
+
+body.ring-dapp-open .header-actions {
+  left: auto;
+  justify-content: flex-end;
+  z-index: 2600;
+}
+
 .app:has(.card--guest) {
   align-items: flex-start;
 }
@@ -128,11 +148,11 @@
     min-height: calc(100vh - 12px);
     min-height: calc(100dvh - 12px);
   }
-  
+
   .title {
     font-size: 2.5rem;
   }
-  
+
   .subtitle {
     font-size: 1.1rem;
   }

apps/pwa/App.tsx

@@ -26,7 +26,7 @@ function AppContent() {
       <div className={`card ${!isLoggedIn ? 'card--guest' : ''}`}>
         {isLoggedIn && <BalanceDisplay />}
         {isLoggedIn && <TransactionActions />}
-        {isLoggedIn && <MultiTabs />}
+        {isLoggedIn && <MultiTabs onOpenSettings={() => setDrawerOpen(true)} />}
 
         {!isLoggedIn && (
           <div className="card--guest-logo-wrap">

src/components/MultiTabs.tsx

@@ -4,6 +4,10 @@ import TransactionHistory from './TransactionHistory'
 import DAppsPage from '../features/dapps/components/DAppsPage'
 import './MultiTabs.css'
 
+interface MultiTabsProps {
+  onOpenSettings?: () => void
+}
+
 const tabs = [
   { key: 'tokens', label: 'Tokens' },
   { key: 'activity', label: 'Activity' },
@@ -14,11 +18,11 @@ function getInitialTab(): string {
   if (typeof window === 'undefined') return 'tokens'
   const p = new URLSearchParams(window.location.search)
   const t = p.get('tab')
-  if (t && tabs.some(tab => tab.key === t)) return t
+  if (t && tabs.some((tab) => tab.key === t)) return t
   return 'tokens'
 }
 
-const MultiTabs: React.FC = () => {
+const MultiTabs: React.FC<MultiTabsProps> = ({ onOpenSettings }) => {
   const [activeTab, setActiveTab] = useState(getInitialTab)
 
   return (
@@ -37,7 +41,7 @@ const MultiTabs: React.FC = () => {
       <div className="tabs-content">
         {activeTab === 'tokens' && <TokenBalance />}
         {activeTab === 'activity' && <TransactionHistory />}
-        {activeTab === 'dapps' && <DAppsPage />}
+        {activeTab === 'dapps' && <DAppsPage onOpenSettings={onOpenSettings} />}
       </div>
     </div>
   )

src/components/fullscreencomps/ChainSwitcher.css

@@ -1,12 +1,14 @@
 .chain-switcher-container {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   position: relative;
 }
 
 .chain-switcher-trigger {
   background: white;
   border-radius: 12px;
-  padding: 8px 16px;
+  padding: 4px 16px;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -52,18 +54,34 @@
 .chain-dropdown {
   position: absolute;
   top: 100%;
-  right: 0;
+  left: 0;
+  right: auto;
   margin-top: 10px;
   background: white;
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   border: 1px solid rgba(0, 0, 0, 0.05);
-  width: 280px;
+  width: min(280px, calc(100vw - 24px));
   overflow: hidden;
   animation: slideDown 0.2s ease-out;
   z-index: 1000;
 }
 
+.chain-dropdown--anchored {
+  position: fixed;
+}
+
+.chain-switcher-backdrop {
+  position: fixed;
+  inset: 0;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: default;
+  z-index: 999;
+}
+
 @keyframes slideDown {
   from {
     opacity: 0;