[Feature Request]: Automatically change workflow tab layout on mobile screen

## Enhanced Issue Title
**[Enhancement] Improve workflow tab layout responsiveness for mobile and tablet screens**

## Background/Context
ComfyUI frontend currently uses a horizontal tab layout for workflow navigation that works well on desktop but becomes problematic on mobile and tablet devices. The current implementation uses PrimeVue's `SelectButton` component with a `ScrollPanel` for overflow handling, which isn't optimal for touch interaction.

The existing codebase already has:
- Responsive design patterns using VueUse `useBreakpoints` (`src/composables/element/useResponsiveCollapse.ts`)
- Mobile test infrastructure with `@mobile` tagged tests
- Established responsive patterns with VueUse breakpoints

## Problem Statement

**Current Behavior:**
- Workflow tabs use a horizontal layout that requires horizontal scrolling on small screens
- Tab buttons are too small for comfortable touch interaction
- Overflow tabs are hidden and require scrolling to discover
- No visual indication of additional tabs beyond the visible area

**Expected Behavior:**
- Workflow tabs should be touch-friendly on mobile devices
- Multiple workflows should remain easily accessible without requiring precise scrolling
- Tab layout should adapt to screen size while maintaining the horizontal tab paradigm

**Impact:**
- Poor mobile user experience when managing multiple workflows
- Difficulty accessing off-screen workflow tabs on touch devices
- Reduced productivity for mobile users

## Steps to Reproduce
1. Open ComfyUI on a mobile device or tablet (screen width < 768px)
2. Create or open multiple workflows (3+ tabs)
3. Observe that tabs become very small and hard to tap
4. Try to access workflow tabs that have scrolled out of view
5. Note the poor touch interaction experience

## Root Cause Analysis
The current `WorkflowTabs.vue` component (located at `src/components/topbar/WorkflowTabs.vue`):
- Uses `SelectButton` with fixed sizing that doesn't adapt to screen size
- Relies on `ScrollPanel` for overflow which requires precise touch scrolling
- Tab buttons don't have adequate touch targets for mobile interaction
- No visual indicators for hidden tabs

## Proposed Solution

### Recommended Approach: Enhanced Mobile Tab Layout

Improve the existing horizontal tab layout for better mobile usability using VueUse breakpoints:

**Mobile Optimizations:**
- Use `useBreakpoints` from VueUse to detect screen sizes
- Increase minimum tab dimensions for better touch targets
- Add visual indicators for overflow tabs (dots, arrows, or tab count)
- Implement swipe gestures for tab navigation
- Apply responsive Tailwind classes based on breakpoint detection

**Implementation Approach:**
```typescript
// Enhanced responsive detection using VueUse
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)
const isMobile = breakpoints.smaller('md') // < 768px
const isTablet = breakpoints.between('md', 'lg') // 768px - 1024px
```

## Code Examples

**Enhanced responsive detection:**
```typescript
// In WorkflowTabs.vue - using VueUse breakpoints
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)
const isMobile = breakpoints.smaller('md')
const isTablet = breakpoints.between('md', 'lg')

// Responsive tab container classes
const tabContainerClasses = computed(() => [
'workflow-tabs-container flex flex-row max-w-full h-full',
{
'relative': isMobile.value, // Add scroll indicators container
}
])

// Responsive tab button classes
const tabButtonClasses = computed(() => [
'p-0 bg-transparent rounded-none flex-shrink-0 relative border-0 border-r border-solid',
{
'min-w-[120px] min-h-[44px]': isMobile.value, // iOS minimum touch target
'min-w-[100px] min-h-[40px]': isTablet.value,
'px-4': isMobile.value || isTablet.value, // Extra padding for touch
}
])
```

**Enhanced overflow indicators:**
```vue

```

## Implementation Checklist

**Phase 1: Responsive Detection**
- [ ] Implement VueUse `useBreakpoints` for mobile/tablet detection

**Phase 2: Enhanced Tab Layout**
- [ ] Apply responsive sizing with Tailwind classes
- [ ] Add responsive padding and spacing for touch interaction
- [ ] Test tab layout with various workflow name lengths

**Phase 3 (Optional - can be separate PR): Enhanced Overflow Handling**
- [ ] Add visual scroll indicators for mobile screens using Tailwind positioning
- [ ] Implement tab count indicator for hidden tabs

**Phase 4 (Optional - can be separate PR): Touch Gesture Support**
- [ ] Implement swipe left/right for tab navigation
- [ ] Add haptic feedback for mobile devices (if supported)
- [ ] Ensure gestures don't conflict with other interactions

**Phase 5: Testing & Polish**
- [ ] Add comprehensive mobile browser tests using VueUse breakpoints
- [ ] Test responsive behavior across VueUse breakpoint changes
- [ ] Verify accessibility compliance for touch navigation
- [ ] (Optional) Optimize performance for touch interactions

## References and Links
- **Related Issues:**
- [#2889 - Touch/Mobile Support](https://github.com/Comfy-Org/ComfyUI_frontend/issues/2889)
- [#1873 - Workflow tab position conflicts between devices](https://github.com/Comfy-Org/ComfyUI_frontend/issues/1873)

- **Relevant Files:**
- `src/components/topbar/WorkflowTabs.vue:1-268`
- `src/composables/element/useResponsiveCollapse.ts:1-42`
- `browser_tests/tests/interaction.spec.ts:535` - Touch interaction test

- **VueUse Documentation:**
- [useBreakpoints](https://vueuse.org/core/useBreakpoints/)
- [breakpointsTailwind](https://vueuse.org/core/useBreakpoints/#breakpointstailwind)

This focused enhancement improves mobile usability while maintaining the familiar horizontal tab paradigm and leveraging existing VueUse patterns in the codebase.

Start with src/components/topbar/WorkflowTabs.vue and compare its responsive patterns with src/composables/element/useResponsiveCollapse.ts. Run the mobile interaction coverage at browser_tests/tests/interaction.spec.ts:535, then define the selected mobile and tablet behavior before changing it. Done means the agreed touch-friendly tab layout works across the stated screen sizes and the relevant mobile tests pass.

Written by the indexing model from the issue text.