From a6f96e52094427203410a1a4f32f73fd500d4e0a Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Fri, 27 Mar 2026 19:02:24 +0800
Subject: [PATCH] fix(web): improve mobile responsiveness for marketplace,
 plugin detail, session monitor, and pipeline form

---
 .../bot-session/BotSessionMonitor.tsx         |   4 +-
 .../pipeline-form/PipelineFormComponent.tsx   |   8 +-
 .../app/home/plugins/PluginDetailContent.tsx  |   4 +-
 .../plugin-market/PluginMarketComponent.tsx   | 118 +++++++++---------
 4 files changed, 68 insertions(+), 66 deletions(-)

diff --git a/web/src/app/home/bots/components/bot-session/BotSessionMonitor.tsx b/web/src/app/home/bots/components/bot-session/BotSessionMonitor.tsx
index c35787b4..23ff23a1 100644
--- a/web/src/app/home/bots/components/bot-session/BotSessionMonitor.tsx
+++ b/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 ? (
diff --git a/web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx b/web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx
index 35775a58..a516a09d 100644
--- a/web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx
+++ b/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">
-                  <ul className="space-y-1">
+                <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="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',
diff --git a/web/src/app/home/plugins/PluginDetailContent.tsx b/web/src/app/home/plugins/PluginDetailContent.tsx
index a89bccc3..285cf331 100644
--- a/web/src/app/home/plugins/PluginDetailContent.tsx
+++ b/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}
diff --git a/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx b/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx
index 9bd6f4f0..9f20c8c2 100644
--- a/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx
+++ b/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
-              type="single"
-              spacing={2}
-              size="sm"
-              value={componentFilter}
-              onValueChange={(value) => {
-                if (value) handleComponentFilterChange(value);
-              }}
-              className="justify-start"
-            >
-              <ToggleGroupItem
-                value="all"
-                aria-label="All components"
-                className="text-xs sm:text-sm cursor-pointer"
+            <div className="overflow-x-auto max-w-full [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+              <ToggleGroup
+                type="single"
+                spacing={2}
+                size="sm"
+                value={componentFilter}
+                onValueChange={(value) => {
+                  if (value) handleComponentFilterChange(value);
+                }}
+                className="justify-start flex-nowrap"
               >
-                {t('market.allComponents')}
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="Tool"
-                aria-label="Tool"
-                className="text-xs sm:text-sm cursor-pointer"
-              >
-                <Wrench className="h-4 w-4 mr-1" />
-                {t('plugins.componentName.Tool')}
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="Command"
-                aria-label="Command"
-                className="text-xs sm:text-sm cursor-pointer"
-              >
-                <Hash className="h-4 w-4 mr-1" />
-                {t('plugins.componentName.Command')}
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="EventListener"
-                aria-label="EventListener"
-                className="text-xs sm:text-sm cursor-pointer"
-              >
-                <AudioWaveform className="h-4 w-4 mr-1" />
-                {t('plugins.componentName.EventListener')}
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="KnowledgeEngine"
-                aria-label="KnowledgeEngine"
-                className="text-xs sm:text-sm cursor-pointer"
-              >
-                <Book className="h-4 w-4 mr-1" />
-                {t('plugins.componentName.KnowledgeEngine')}
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="Parser"
-                aria-label="Parser"
-                className="text-xs sm:text-sm cursor-pointer"
-              >
-                <FileText className="h-4 w-4 mr-1" />
-                {t('plugins.componentName.Parser')}
-              </ToggleGroupItem>
-            </ToggleGroup>
+                <ToggleGroupItem
+                  value="all"
+                  aria-label="All components"
+                  className="text-xs sm:text-sm cursor-pointer"
+                >
+                  {t('market.allComponents')}
+                </ToggleGroupItem>
+                <ToggleGroupItem
+                  value="Tool"
+                  aria-label="Tool"
+                  className="text-xs sm:text-sm cursor-pointer"
+                >
+                  <Wrench className="h-4 w-4 mr-1" />
+                  {t('plugins.componentName.Tool')}
+                </ToggleGroupItem>
+                <ToggleGroupItem
+                  value="Command"
+                  aria-label="Command"
+                  className="text-xs sm:text-sm cursor-pointer"
+                >
+                  <Hash className="h-4 w-4 mr-1" />
+                  {t('plugins.componentName.Command')}
+                </ToggleGroupItem>
+                <ToggleGroupItem
+                  value="EventListener"
+                  aria-label="EventListener"
+                  className="text-xs sm:text-sm cursor-pointer"
+                >
+                  <AudioWaveform className="h-4 w-4 mr-1" />
+                  {t('plugins.componentName.EventListener')}
+                </ToggleGroupItem>
+                <ToggleGroupItem
+                  value="KnowledgeEngine"
+                  aria-label="KnowledgeEngine"
+                  className="text-xs sm:text-sm cursor-pointer"
+                >
+                  <Book className="h-4 w-4 mr-1" />
+                  {t('plugins.componentName.KnowledgeEngine')}
+                </ToggleGroupItem>
+                <ToggleGroupItem
+                  value="Parser"
+                  aria-label="Parser"
+                  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 */}