fix(web): improve mobile responsiveness for marketplace, plugin detail, session monitor, and pipeline form

web/src/app/home/bots/components/bot-session/BotSessionMonitor.tsx

@@ -335,9 +335,9 @@ const BotSessionMonitor = forwardRef<
   );
 
   return (
-    <div className="flex h-full min-h-0 rounded-lg border overflow-hidden">
+    <div className="flex flex-col md:flex-row h-full min-h-0 rounded-lg border overflow-hidden">
       {/* Left Panel: Session List */}
-      <div className="w-60 flex-shrink-0 border-r flex flex-col min-h-0">
+      <div className="max-h-48 md:max-h-none md:w-60 flex-shrink-0 border-b md:border-b-0 md:border-r flex flex-col min-h-0">
         {/* Session List */}
         <ScrollArea className="flex-1 min-h-0">
           {loadingSessions && sessions.length === 0 ? (

web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx

@@ -475,11 +475,11 @@ export default function PipelineFormComponent({
             onSubmit={form.handleSubmit(handleFormSubmit)}
             className="h-full flex flex-col flex-1 min-h-0 mb-2"
           >
-            <div className="flex-1 flex min-h-0">
+            <div className="flex-1 flex flex-col md:flex-row min-h-0">
               {/* Vertical section navigation (only show when multiple sections) */}
               {formLabelList.length > 1 && (
-                <nav className="w-44 shrink-0 pr-4 mr-4 border-r overflow-y-auto">
+                <nav className="shrink-0 mb-4 md:mb-0 md:w-44 md:pr-4 md:mr-4 md:border-r overflow-x-auto md:overflow-x-visible md:overflow-y-auto">
-                  <ul className="space-y-1">
+                  <ul className="flex md:flex-col gap-1 md:space-y-1">
                     {formLabelList.map((section) => {
                       const Icon = section.icon;
                       return (
@@ -488,7 +488,7 @@ export default function PipelineFormComponent({
                             type="button"
                             onClick={() => setActiveSection(section.name)}
                             className={cn(
-                              'w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors text-left cursor-pointer',
+                              'w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors text-left cursor-pointer whitespace-nowrap',
                               activeSection === section.name
                                 ? 'bg-accent text-accent-foreground'
                                 : 'text-muted-foreground hover:bg-muted hover:text-foreground',

web/src/app/home/plugins/PluginDetailContent.tsx

@@ -77,9 +77,9 @@ export default function PluginDetailContent({ id }: { id: string }) {
         ) : null}
       </div>
 
-      <div className="flex flex-1 flex-row overflow-hidden min-h-0 gap-6 max-w-full">
+      <div className="flex flex-1 flex-col md:flex-row overflow-hidden min-h-0 gap-6 max-w-full">
         {/* Left side - Config */}
-        <div className="w-[380px] flex-shrink-0 overflow-y-auto overflow-x-hidden">
+        <div className="md:w-[380px] md:flex-shrink-0 overflow-y-auto overflow-x-hidden">
           <PluginForm
             pluginAuthor={pluginAuthor}
             pluginName={pluginName}

web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx

@@ -442,68 +442,70 @@ function MarketPageContent({
         {/* Component filter and sort */}
         <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 px-3 sm:px-4">
           {/* Component filter */}
-          <div className="flex flex-col sm:flex-row items-center gap-2">
+          <div className="flex flex-col sm:flex-row items-center gap-2 min-w-0 max-w-full">
             <span className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">
               {t('market.filterByComponent')}:
             </span>
-            <ToggleGroup
+            <div className="overflow-x-auto max-w-full [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
-              type="single"
+              <ToggleGroup
-              spacing={2}
+                type="single"
-              size="sm"
+                spacing={2}
-              value={componentFilter}
+                size="sm"
-              onValueChange={(value) => {
+                value={componentFilter}
-                if (value) handleComponentFilterChange(value);
+                onValueChange={(value) => {
-              }}
+                  if (value) handleComponentFilterChange(value);
-              className="justify-start"
+                }}
-            >
+                className="justify-start flex-nowrap"
-              <ToggleGroupItem
-                value="all"
-                aria-label="All components"
-                className="text-xs sm:text-sm cursor-pointer"
               >
-                {t('market.allComponents')}
+                <ToggleGroupItem
-              </ToggleGroupItem>
+                  value="all"
-              <ToggleGroupItem
+                  aria-label="All components"
-                value="Tool"
+                  className="text-xs sm:text-sm cursor-pointer"
-                aria-label="Tool"
+                >
-                className="text-xs sm:text-sm cursor-pointer"
+                  {t('market.allComponents')}
-              >
+                </ToggleGroupItem>
-                <Wrench className="h-4 w-4 mr-1" />
+                <ToggleGroupItem
-                {t('plugins.componentName.Tool')}
+                  value="Tool"
-              </ToggleGroupItem>
+                  aria-label="Tool"
-              <ToggleGroupItem
+                  className="text-xs sm:text-sm cursor-pointer"
-                value="Command"
+                >
-                aria-label="Command"
+                  <Wrench className="h-4 w-4 mr-1" />
-                className="text-xs sm:text-sm cursor-pointer"
+                  {t('plugins.componentName.Tool')}
-              >
+                </ToggleGroupItem>
-                <Hash className="h-4 w-4 mr-1" />
+                <ToggleGroupItem
-                {t('plugins.componentName.Command')}
+                  value="Command"
-              </ToggleGroupItem>
+                  aria-label="Command"
-              <ToggleGroupItem
+                  className="text-xs sm:text-sm cursor-pointer"
-                value="EventListener"
+                >
-                aria-label="EventListener"
+                  <Hash className="h-4 w-4 mr-1" />
-                className="text-xs sm:text-sm cursor-pointer"
+                  {t('plugins.componentName.Command')}
-              >
+                </ToggleGroupItem>
-                <AudioWaveform className="h-4 w-4 mr-1" />
+                <ToggleGroupItem
-                {t('plugins.componentName.EventListener')}
+                  value="EventListener"
-              </ToggleGroupItem>
+                  aria-label="EventListener"
-              <ToggleGroupItem
+                  className="text-xs sm:text-sm cursor-pointer"
-                value="KnowledgeEngine"
+                >
-                aria-label="KnowledgeEngine"
+                  <AudioWaveform className="h-4 w-4 mr-1" />
-                className="text-xs sm:text-sm cursor-pointer"
+                  {t('plugins.componentName.EventListener')}
-              >
+                </ToggleGroupItem>
-                <Book className="h-4 w-4 mr-1" />
+                <ToggleGroupItem
-                {t('plugins.componentName.KnowledgeEngine')}
+                  value="KnowledgeEngine"
-              </ToggleGroupItem>
+                  aria-label="KnowledgeEngine"
-              <ToggleGroupItem
+                  className="text-xs sm:text-sm cursor-pointer"
-                value="Parser"
+                >
-                aria-label="Parser"
+                  <Book className="h-4 w-4 mr-1" />
-                className="text-xs sm:text-sm cursor-pointer"
+                  {t('plugins.componentName.KnowledgeEngine')}
-              >
+                </ToggleGroupItem>
-                <FileText className="h-4 w-4 mr-1" />
+                <ToggleGroupItem
-                {t('plugins.componentName.Parser')}
+                  value="Parser"
-              </ToggleGroupItem>
+                  aria-label="Parser"
-            </ToggleGroup>
+                  className="text-xs sm:text-sm cursor-pointer"
+                >
+                  <FileText className="h-4 w-4 mr-1" />
+                  {t('plugins.componentName.Parser')}
+                </ToggleGroupItem>
+              </ToggleGroup>
+            </div>
           </div>
 
           {/* Sort dropdown */}