frontend/src/assets/css/BottomTabs.css
/* Style section remains the same as in the previous response */
.bottom-tabs {
display: flex;
flex-direction: column;
background-color: #1e1e1e;
position: relative;
min-height: 100px;
max-height: 80vh;
width: 100%; /* Ensure it takes the full width of its container */
overflow: hidden; /* Prevent content from overflowing */
}
.resize-handle {
position: absolute;
top: -5px;
left: 0;
right: 0;
height: 10px;
cursor: ns-resize;
z-index: 10;
}
.tabs-header {
display: flex;
justify-content: space-between;
background-color: #252526;
border-bottom: 1px solid #333333;
width: 100%; /* Ensure it takes the full width */
}
.tabs {
display: flex;
}
.tabs button {
padding: 8px 16px;
background: none;
border: none;
color: #cccccc;
cursor: pointer;
font-size: 13px;
border-right: 1px solid #333333;
text-align: left;
}
.tabs button:hover {
background-color: #2a2d2e;
}
.tabs button.active {
background-color: #37373d;
color: #ffffff;
}
.tabs-actions {
display: flex;
align-items: center;
padding-right: 8px;
}
.tabs-actions button {
background: none;
border: none;
color: #cccccc;
cursor: pointer;
padding: 4px 8px;
margin-left: 8px;
}
.tabs-actions button:hover {
background-color: #2a2d2e;
}
.tabs-actions select {
background-color: #3c3c3c;
color: #cccccc;
border: 1px solid #555555;
padding: 4px 8px;
margin-left: 8px;
border-radius: 2px;
}
.tab-content {
flex: 1;
overflow: auto;
padding: 8px;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 13px;
width: 100%; /* Ensure it takes the full width */
box-sizing: border-box; /* Include padding in width calculation */
}
.loading, .error, .terminal-placeholder {
padding: 16px;
color: #cccccc;
}
.error {
color: #f44336;
}
pre {
margin: 0;
white-space: pre-wrap; /* Allow text to wrap */
word-break: break-all;
max-width: 100%; /* Ensure it doesn't exceed container width */
}
.left-aligned {
text-align: left;
}
.terminal-style {
font-family: 'Consolas', 'Courier New', monospace;
background-color: #1e1e1e;
color: #cccccc;
padding: 0;
line-height: 1.2;
/* Changed from pre to pre-wrap to ensure text wrapping */
white-space: pre-wrap;
overflow-wrap: break
}