fix(pages): make install-channel command box scrollable (#912)

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}

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; }