From 81b6d7bf2fa70cb7b6292d130f540ae6b14ddf16 Mon Sep 17 00:00:00 2001
From: wu21-web <wu2196674@icloud.com>
Date: Fri, 14 Aug 2026 21:39:18 +0900
Subject: [PATCH] fix(pages): make install-channel command box scrollable

---
 pages/src/components/HeroSection.tsx |  7 +++++--
 pages/src/styles/index.css           | 22 ++++++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/pages/src/components/HeroSection.tsx b/pages/src/components/HeroSection.tsx
index d657ace1a..3d4a9e579 100644
--- a/pages/src/components/HeroSection.tsx
+++ b/pages/src/components/HeroSection.tsx
@@ -518,13 +518,16 @@ const HeroSection: React.FC = () => {
               }}
             >
               <span
+                className="command-scroll"
                 style={{
+                  flex: 1,
+                  minWidth: 0,
                   fontSize: 13,
                   fontFamily: 'Menlo, monospace',
                   color: 'rgba(255,255,255,0.85)',
                   whiteSpace: 'nowrap',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
+                  overflowX: 'auto',
+                  overflowY: 'hidden',
                 }}
               >
                 {activeChannel.cmd}
diff --git a/pages/src/styles/index.css b/pages/src/styles/index.css
index 1b2a5aa3a..34be891a2 100644
--- a/pages/src/styles/index.css
+++ b/pages/src/styles/index.css
@@ -47,6 +47,28 @@ a {
   background: rgba(255,255,255,0.3);
 }
 
+.command-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+}
+
+.command-scroll::-webkit-scrollbar {
+  height: 4px;
+}
+
+.command-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.command-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 2px;
+}
+
+.command-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
 /* Terminal cursor blink */
 @keyframes cursor-blink {
   0%, 100% { opacity: 1; }