xterm theme

public/css/style.css

@@ -40,7 +40,61 @@
   }
 
   .xterm {
-    background-color: #111426 !important;
+    /* Ensure terminal container respects parent dimensions */
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+    /* Add padding for better text spacing */
+    box-sizing: border-box;
+    /* Prevent padding from causing overflow */
+  }
+
+  /* Viewport styling for scrollbars */
+  .xterm .xterm-viewport {
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #4b5563 #1f2937;
+  }
+
+  /* Webkit scrollbar styling */
+  .xterm .xterm-viewport::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .xterm .xterm-viewport::-webkit-scrollbar-track {
+    background: #1f2937;
+    /* Match terminal background for consistency */
+  }
+
+  .xterm .xterm-viewport::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
+  }
+
+  .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+    /* Slightly lighter on hover for feedback */
+  }
+
+  /* Ensure screen fits container */
+  .xterm .xterm-screen {
+    width: 100% !important;
+    height: 100% !important;
+    /* Ensure full height usage */
+  }
+
+  /* Improve text rendering */
+  .xterm .xterm-char {
+    line-height: 1.2;
+    /* Adjust line height for better text alignment */
+  }
+
+  /* Prevent text overflow */
+  .xterm .xterm-rows {
+    overflow: hidden;
+    /* Prevent horizontal overflow */
+    white-space: pre-wrap;
+    /* Allow text wrapping if needed */
   }
 
   #app {
@@ -254,6 +308,7 @@
   .nav-btn {
     @apply bg-blue-600 text-white font-medium px-3 py-1 rounded transition duration-200 text-sm;
   }
+
   .nav-btn2 {
     @apply bg-blue-600 text-white font-medium px-3 py-1 rounded transition duration-200 text-sm;
   }