Improve mobile swipe tabs with native scroll-snap

- Rewrite SwipeTabs to use CSS scroll-snap for smoother transitions
- Add GPU acceleration hints for fluid animations
- Use native scrolling behavior instead of manual touch handling
- Add swipe-tabs--snap and swipe-tabs--static variants
- Improve height transitions and layout containment
- Update dimension variables for better spacing

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

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

frontend/src/pages/admin/Features.tsx

@@ -5,6 +5,7 @@ import { useSidebar } from '../../contexts/SidebarContext';
 import { useModules, TOGGLEABLE_MODULES } from '../../contexts/ModulesContext';
 import type { ModuleId } from '../../contexts/ModulesContext';
 import Feature1Tab from '../../components/admin/Feature1Tab';
+import { SwipeTabs } from '../../components/SwipeTabs';
 import '../../styles/AdminPanel.css';
 
 type TabId = 'config' | 'dashboard' | 'feature1' | 'feature2' | 'feature3' | 'search' | 'notifications';
@@ -281,6 +282,8 @@ export default function Features() {
         return position === 'bottom';
     });
 
+    const tabIds = ['config', ...topOrderModules, ...bottomOrderModules] as TabId[];
+
     const renderConfigTab = () => {
         return (
             <div className="theme-tab-content">
@@ -380,11 +383,11 @@ export default function Features() {
         );
     };
 
-    const renderTabContent = () => {
+    const renderTabContent = (tabId: TabId) => {
         if (!hasInitialized || isLoading) {
             return <div className="loading">Loading...</div>;
         }
-        switch (activeTab) {
+        switch (tabId) {
             case 'config':
                 return renderConfigTab();
             case 'dashboard':
@@ -501,9 +504,14 @@ export default function Features() {
                 </div>
             </div>
 
-            <div className="admin-tab-content">
-                {renderTabContent()}
-            </div>
+            <SwipeTabs
+                className="admin-tab-swipe"
+                tabs={tabIds}
+                activeTab={activeTab}
+                onTabChange={handleTabChange}
+                renderPanel={renderTabContent}
+                panelClassName="admin-tab-content swipe-panel-content"
+            />
         </main>
     );
 }