[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:

// 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:

// 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:

<template>
  <div :class="tabContainerClasses">
    <\!-- Left scroll indicator -->
    <Button
      v-if="showLeftScroll && isMobile"
      icon="pi pi-chevron-left"
      class="absolute left-0 z-10 bg-surface-0/90 w-8 h-8"
      @click="scrollLeft"
    />
    
    <ScrollPanel ref="scrollPanelRef" class="overflow-hidden no-drag">
      <SelectButton
        class="workflow-tabs bg-transparent"
        :class="tabButtonClasses"
        :model-value="selectedWorkflow"
        :options="options"
        option-label="label"
        data-key="value"
        @update:model-value="onWorkflowChange"
      >
        <template #option="{ option }">
          <WorkflowTab
            :workflow-option="option"
            :is-mobile="isMobile"
            @contextmenu="showContextMenu($event, option)"
            @click.middle="onCloseWorkflow(option)"
          />
        </template>
      </SelectButton>
    </ScrollPanel>
    
    <\!-- Right scroll indicator with tab count -->
    <div v-if="isMobile" class="flex items-center">
      <Button
        v-if="showRightScroll"
        icon="pi pi-chevron-right"
        class="bg-surface-0/90 w-8 h-8"
        @click="scrollRight"
      />
      <div
        v-if="hiddenTabCount > 0"
        class="bg-primary text-primary-contrast text-xs rounded px-2 py-1 ml-1"
      >
        +{{ hiddenTabCount }}
      </div>
    </div>
  </div>
</template>

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
  • #1873 - Workflow tab position conflicts between devices

• 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
  • breakpointsTailwind

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