Refactor footer padding and enhance scrollbar styles for terminal and content areas

This commit is contained in:
ishikabhoyar
2025-08-17 17:07:38 +05:30
parent e4f193613a
commit eabfbf806e
2 changed files with 45 additions and 2 deletions

View File

@@ -8,7 +8,8 @@ function App() {
<footer className="footer-bar fixed bottom-0 left-0 right-0 border-t border-slate-200/40 dark:border-gray-800/20 bg-black">
<div className="flex items-center justify-center h-7">
<span className="text-xs text-slate-400 dark:text-gray-400 flex items-center">
Copyright © 2025. Made with <span className="text-red-400 dark:text-red-500 mx-0.5"></span> by Ishika and Arnab.
Copyright © 2025. Made with
by Ishika and Arnab.
</span>
</div>
</footer>

View File

@@ -422,15 +422,36 @@ body {
padding: 8px;
font-family: monospace;
overflow-y: auto;
overflow-x: hidden;
height: calc(100% - 36px); /* Adjust based on your header height */
background-color: #1e1e1e;
color: #ddd;
outline: none; /* Remove focus outline */
scrollbar-width: thin;
scrollbar-color: #555555 #1e1e1e;
}
.panel-terminal::-webkit-scrollbar {
width: 8px;
}
.panel-terminal::-webkit-scrollbar-track {
background: #1e1e1e;
}
.panel-terminal::-webkit-scrollbar-thumb {
background: #555555;
border-radius: 4px;
}
.panel-terminal::-webkit-scrollbar-thumb:hover {
background: #666666;
}
.panel-terminal .terminal-line {
white-space: pre-wrap;
margin-bottom: 3px;
word-wrap: break-word; /* Ensure long words don't cause horizontal overflow */
}
.terminal-line {
@@ -1239,7 +1260,7 @@ body {
display: flex;
flex-direction: column;
background-color: var(--vscode-panel-background);
padding-bottom: 50px; /* Add padding at the bottom to prevent footer overlap */
padding-bottom: 30px; /* Reduced padding to keep buttons just above footer */
}
.terminal-header {
@@ -1275,7 +1296,28 @@ body {
font-family: 'Consolas', 'Monaco', monospace;
font-size: 14px;
overflow-y: auto;
overflow-x: hidden;
white-space: pre-wrap;
max-height: calc(100% - 10px); /* Ensure content doesn't expand beyond container */
scrollbar-width: thin;
scrollbar-color: #555555 #1e1e1e;
}
.terminal-content::-webkit-scrollbar {
width: 8px;
}
.terminal-content::-webkit-scrollbar-track {
background: #1e1e1e;
}
.terminal-content::-webkit-scrollbar-thumb {
background: #555555;
border-radius: 4px;
}
.terminal-content::-webkit-scrollbar-thumb:hover {
background: #666666;
}
.terminal-line {