fix(qr-button): improve layout and z-index

- Stack room code and share link vertically on left
- Place square QR button on right, spanning both rows
- Show mini QR code (40px) in button instead of emoji
- Fix popover z-index to appear above dropdown menu (z: 10000)
- Reduce button padding for more compact appearance

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.mcp.json

@@ -0,0 +1,16 @@
+{
+  "mcpServers": {
+    "sqlite": {
+      "command": "/Users/antialias/.nvm/versions/node/v20.19.3/bin/npx",
+      "args": [
+        "-y",
+        "mcp-server-sqlite-npx",
+        "/Users/antialias/projects/soroban-abacus-flashcards/apps/web/data/sqlite.db"
+      ],
+      "env": {
+        "PATH": "/Users/antialias/.nvm/versions/node/v20.19.3/bin:/opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/usr/bin:/bin",
+        "NODE_PATH": "/Users/antialias/.nvm/versions/node/v20.19.3/lib/node_modules"
+      }
+    }
+  }
+}

apps/web/.claude/CLAUDE.md

@@ -267,3 +267,20 @@ Before setting a z-index, always check:
 1. What stacking context is this element in?
 2. Am I comparing against siblings or global elements?
 3. Does my parent create a stacking context?
+
+## Database Access
+
+This project uses SQLite with Drizzle ORM. Database location: `./data/sqlite.db`
+
+**ALWAYS use MCP SQLite tools for database operations:**
+- `mcp__sqlite__list_tables` - List all tables
+- `mcp__sqlite__describe_table` - Get table schema
+- `mcp__sqlite__read_query` - Run SELECT queries
+- `mcp__sqlite__write_query` - Run INSERT/UPDATE/DELETE queries
+- `mcp__sqlite__create_table` - Create new tables
+- **DO NOT use bash `sqlite3` commands** - use the MCP tools instead
+
+**Database Schema:**
+- Schema definitions: `src/db/schema/`
+- Drizzle config: `drizzle.config.ts`
+- Migrations: `drizzle/` directory

apps/web/.claude/settings.local.json

@@ -104,9 +104,17 @@
       "Bash(do gh run list --limit 1 --workflow=\"Build and Deploy\" --json conclusion,status,databaseId --jq '.[0] | \"\"\\(.status) - \\(.conclusion // \"\"running\"\") - Run \\(.databaseId)\"\"')",
       "Bash(do ssh nas.home.network '/usr/local/bin/docker inspect soroban-abacus-flashcards --format=\"\"{{index .Config.Labels \\\"\"org.opencontainers.image.revision\\\"\"}}\"\"')",
       "Bash(git rev-parse HEAD)",
-      "Bash(gh run watch --exit-status 18662351595)"
+      "Bash(gh run watch --exit-status 18662351595)",
+      "WebFetch(domain:github.com)",
+      "WebSearch",
+      "WebFetch(domain:www.npmjs.com)",
+      "mcp__sqlite__list_tables",
+      "mcp__sqlite__describe_table",
+      "mcp__sqlite__read_query"
     ],
     "deny": [],
     "ask": []
-  }
+  },
+  "enableAllProjectMcpServers": true,
+  "enabledMcpjsonServers": ["sqlite"]
 }

apps/web/src/components/common/QRCodeButton.tsx

@@ -3,6 +3,7 @@ import type { CSSProperties } from 'react'
 import { useState } from 'react'
 import { QRCodeSVG } from 'qrcode.react'
 import { useClipboard } from '@/hooks/useClipboard'
+import { Z_INDEX } from '@/constants/zIndex'
 
 export interface QRCodeButtonProps {
   /**
@@ -25,21 +26,20 @@ export function QRCodeButton({ url, style }: QRCodeButtonProps) {
   const { copied, copy } = useClipboard()
 
   const buttonStyles: CSSProperties = {
-    width: '100%',
     cursor: 'pointer',
     transition: 'all 0.2s ease',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: '8px',
-    marginBottom: '6px',
     border: '2px solid rgba(251, 146, 60, 0.4)',
     background: 'linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(251, 146, 60, 0.3))',
     borderRadius: '8px',
-    padding: '10px 16px',
-    fontSize: '13px',
-    fontWeight: '600',
+    padding: '6px',
+    fontSize: '16px',
     color: 'rgba(253, 186, 116, 1)',
+    aspectRatio: '1',
+    alignSelf: 'stretch',
+    flexShrink: 0,
     ...style,
   }
 
@@ -61,8 +61,7 @@ export function QRCodeButton({ url, style }: QRCodeButtonProps) {
             Object.assign(e.currentTarget.style, buttonStyles)
           }}
         >
-          <span style={{ fontSize: '16px' }}>📱</span>
-          <span>QR Code</span>
+          <QRCodeSVG value={url} size={40} level="L" />
         </button>
       </Popover.Trigger>
 
@@ -77,7 +76,7 @@ export function QRCodeButton({ url, style }: QRCodeButtonProps) {
             borderRadius: '12px',
             padding: '20px',
             boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)',
-            zIndex: 1000,
+            zIndex: Z_INDEX.GAME_NAV.HAMBURGER_NESTED_DROPDOWN,
             maxWidth: '320px',
           }}
         >

apps/web/src/components/nav/RoomShareButtons.tsx

@@ -19,31 +19,37 @@ export interface RoomShareButtonsProps {
  */
 export function RoomShareButtons({ joinCode, shareUrl }: RoomShareButtonsProps) {
   return (
-    <>
-      <CopyButton
-        text={joinCode}
-        variant="code"
-        label={
-          <>
-            <span>📋</span>
-            <span>{joinCode}</span>
-          </>
-        }
-      />
+    <div style={{ display: 'flex', gap: '6px', marginBottom: '6px' }}>
+      {/* Left side: stacked buttons */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', flex: 1 }}>
+        <CopyButton
+          text={joinCode}
+          variant="code"
+          label={
+            <>
+              <span>📋</span>
+              <span>{joinCode}</span>
+            </>
+          }
+          style={{ marginBottom: 0 }}
+        />
 
-      <CopyButton
-        text={shareUrl}
-        variant="link"
-        label={
-          <>
-            <span>🔗</span>
-            <span>Share Link</span>
-          </>
-        }
-        copiedLabel="Link Copied!"
-      />
+        <CopyButton
+          text={shareUrl}
+          variant="link"
+          label={
+            <>
+              <span>🔗</span>
+              <span>Share Link</span>
+            </>
+          }
+          copiedLabel="Link Copied!"
+          style={{ marginBottom: 0 }}
+        />
+      </div>
 
+      {/* Right side: QR code button */}
       <QRCodeButton url={shareUrl} />
-    </>
+    </div>
   )
 }

pnpm-lock.yaml

@@ -173,6 +173,9 @@ importers:
       python-bridge:
         specifier: ^1.1.0
         version: 1.1.0
+      qrcode.react:
+        specifier: ^4.2.0
+        version: 4.2.0(react@18.3.1)
       react:
         specifier: ^18.2.0
         version: 18.3.1
@@ -7726,6 +7729,11 @@ packages:
   python-bridge@1.1.0:
     resolution: {integrity: sha512-qjQ0QB8p9cn/XDeILQH0aP307hV58lrmv0Opjyub68Um7FHdF+ZXlTqyxNkKaXOFk2QSkScoPWwn7U9GGnrkeQ==}
 
+  qrcode.react@4.2.0:
+    resolution: {integrity: sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   qs@6.13.0:
     resolution: {integrity: sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==}
     engines: {node: '>=0.6'}
@@ -17587,6 +17595,10 @@ snapshots:
     dependencies:
       bluebird: 3.7.2
 
+  qrcode.react@4.2.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   qs@6.13.0:
     dependencies:
       side-channel: 1.1.0