fix: prevent modal closure when clicking tabs in AllSkillsModal

Fix bug where clicking the "Mastered" (or any other) tab in the "View all skills"
modal would unexpectedly close the modal.

Root cause: Tabs.Trigger components from Radix UI were rendering as buttons without
explicit type="button" attributes. Browsers can treat buttons without explicit types
inconsistently, sometimes causing click events to bubble up and trigger unwanted
behaviors like closing modals.

Solution: Use Radix UI's asChild prop to wrap each Tabs.Trigger with an explicit
<button type="button"> element. This ensures:
- Buttons never act as submit buttons
- Click events are properly contained
- Radix UI still handles accessibility and state management

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

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

apps/web/src/app/create/worksheets/addition/components/config-panel/AllSkillsModal.tsx

@@ -466,27 +466,32 @@ export function AllSkillsModal({
                 <Tabs.Trigger
                   key={tab.value}
                   value={tab.value}
-                  className={css({
-                    padding: '0.5rem 1rem',
-                    fontSize: '0.875rem',
-                    fontWeight: '500',
-                    border: 'none',
-                    borderBottom: '2px solid',
-                    borderColor: 'transparent',
-                    color: isDark ? 'gray.400' : 'gray.600',
-                    cursor: 'pointer',
-                    transition: 'all 0.2s',
-                    backgroundColor: 'transparent',
-                    _hover: {
-                      color: isDark ? 'gray.200' : 'gray.900',
-                    },
-                    '&[data-state=active]': {
-                      color: 'blue.600',
-                      borderColor: 'blue.600',
-                    },
-                  })}
+                  asChild
                 >
-                  {tab.label} ({tab.count})
+                  <button
+                    type="button"
+                    className={css({
+                      padding: '0.5rem 1rem',
+                      fontSize: '0.875rem',
+                      fontWeight: '500',
+                      border: 'none',
+                      borderBottom: '2px solid',
+                      borderColor: 'transparent',
+                      color: isDark ? 'gray.400' : 'gray.600',
+                      cursor: 'pointer',
+                      transition: 'all 0.2s',
+                      backgroundColor: 'transparent',
+                      _hover: {
+                        color: isDark ? 'gray.200' : 'gray.900',
+                      },
+                      '&[data-state=active]': {
+                        color: 'blue.600',
+                        borderColor: 'blue.600',
+                      },
+                    })}
+                  >
+                    {tab.label} ({tab.count})
+                  </button>
                 </Tabs.Trigger>
               ))}
             </Tabs.List>