From 4f9aeb89fb4c63c6514fbad2bbbc47265d2478b8 Mon Sep 17 00:00:00 2001
From: Karmaa <bugattiguy527@gmail.com>
Date: Sun, 9 Mar 2025 18:20:43 -0500
Subject: [PATCH] Shifted terminal down and to the right so its not squished up
 in the top left corner. Fix scroll wheel sizing and looks. Prepared for this
 bug update release.

---
 src/AddHostModal.jsx | 17 ++++++++++++-----
 src/TabList.jsx      | 16 ++++++----------
 src/Terminal.jsx     |  5 +++--
 src/index.css        | 20 ++++++++++++++++++++
 4 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/AddHostModal.jsx b/src/AddHostModal.jsx
index 579f60e9..d73b78a3 100644
--- a/src/AddHostModal.jsx
+++ b/src/AddHostModal.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import { CssVarsProvider } from '@mui/joy/styles';
-import { Modal, Button, FormControl, FormLabel, Input, Stack, DialogTitle, DialogContent, ModalDialog, Select, Option, FormHelperText } from '@mui/joy';
+import { Modal, Button, FormControl, FormLabel, Input, Stack, DialogTitle, DialogContent, ModalDialog, Select, Option } from '@mui/joy';
 import theme from './theme';
 
 const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidden }) => {
@@ -31,15 +31,22 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
         <CssVarsProvider theme={theme}>
             <Modal open={!isHidden} onClose={() => setIsAddHostHidden(true)}>
                 <ModalDialog
+                    layout="center"
                     sx={{
                         backgroundColor: theme.palette.general.tertiary,
                         borderColor: theme.palette.general.secondary,
                         color: theme.palette.text.primary,
                         padding: 3,
                         borderRadius: 10,
-                        overflowX: 'hidden',
-                        overflowY: 'auto',
-                    }}>
+                        width: "auto",
+                        maxWidth: "90vw",
+                        minWidth: "fit-content",
+                        overflow: "hidden",
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                    }}
+                >
                     <DialogTitle>Add Host</DialogTitle>
                     <DialogContent>
                         <form
@@ -48,7 +55,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
                                 if (isFormValid()) handleAddHost();
                             }}
                         >
-                            <Stack spacing={2}>
+                            <Stack spacing={2} sx={{ width: "100%", maxWidth: "100%", overflow: "hidden" }}>
                                 <FormControl>
                                     <FormLabel>Host Name</FormLabel>
                                     <Input
diff --git a/src/TabList.jsx b/src/TabList.jsx
index cb4ebf26..59b4a486 100644
--- a/src/TabList.jsx
+++ b/src/TabList.jsx
@@ -5,12 +5,11 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
     const isSplitScreenActive = splitTabIds.length > 0;
 
     return (
-        <div className="inline-flex items-center h-full px-[0.5rem]">
+        <div className="tablist inline-flex items-center h-full px-[0.5rem] overflow-x-auto">
             {terminals.map((terminal, index) => {
                 const isActive = terminal.id === activeTab;
                 const isSplit = splitTabIds.includes(terminal.id);
-
-                const isSplitButtonDisabled = isActive && !isSplitScreenActive || splitTabIds.length >= 3 && !isSplit;
+                const isSplitButtonDisabled = (isActive && !isSplitScreenActive) || (splitTabIds.length >= 3 && !isSplit);
 
                 return (
                     <div key={terminal.id} className={index < terminals.length - 1 ? "mr-[0.5rem]" : ""}>
@@ -20,8 +19,7 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
                                 onClick={() => setActiveTab(terminal.id)}
                                 disabled={isSplit}
                                 sx={{
-                                    backgroundColor:
-                                        isActive ? theme.palette.general.primary : theme.palette.general.disabled,
+                                    backgroundColor: isActive ? theme.palette.general.primary : theme.palette.general.disabled,
                                     color: theme.palette.text.primary,
                                     "&:hover": { backgroundColor: theme.palette.general.secondary },
                                     ":disabled": { backgroundColor: theme.palette.general.disabled },
@@ -40,9 +38,7 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
                                 onClick={() => toggleSplit(terminal.id)}
                                 disabled={isSplitButtonDisabled || isActive}
                                 sx={{
-                                    backgroundColor: isSplit
-                                        ? theme.palette.general.primary
-                                        : theme.palette.general.tertiary,
+                                    backgroundColor: isSplit ? theme.palette.general.primary : theme.palette.general.tertiary,
                                     color: theme.palette.text.primary,
                                     ":disabled": { backgroundColor: theme.palette.general.disabled },
                                     "&:hover": { backgroundColor: theme.palette.general.secondary },
@@ -58,7 +54,7 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
                             {/* Close Tab Button */}
                             <Button
                                 onClick={() => closeTab(terminal.id)}
-                                disabled={isSplitScreenActive && isActive || isSplit}
+                                disabled={(isSplitScreenActive && isActive) || isSplit}
                                 sx={{
                                     backgroundColor: theme.palette.general.tertiary,
                                     color: theme.palette.text.primary,
@@ -90,4 +86,4 @@ TabList.propTypes = {
     theme: PropTypes.object.isRequired,
 };
 
-export default TabList;
+export default TabList;
\ No newline at end of file
diff --git a/src/Terminal.jsx b/src/Terminal.jsx
index 04e5f72d..11a259e4 100644
--- a/src/Terminal.jsx
+++ b/src/Terminal.jsx
@@ -18,8 +18,8 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
 
         if (!parentContainer || parentContainer.clientWidth === 0) return;
 
-        const parentWidth = parentContainer.clientWidth;
-        const parentHeight = parentContainer.clientHeight;
+        const parentWidth = parentContainer.clientWidth - 10;
+        const parentHeight = parentContainer.clientHeight - 10;
 
         terminalContainer.style.width = `${parentWidth}px`;
         terminalContainer.style.height = `${parentHeight}px`;
@@ -162,6 +162,7 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
                 position: 'absolute',
                 width: '100%',
                 height: '100%',
+                transform: 'translateY(5px) translateX(5px)',
             }}
         />
     );
diff --git a/src/index.css b/src/index.css
index daee9449..d084731e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,4 +15,24 @@
 
 .terminal-container > div {
   min-height: 0;
+}
+
+.tablist::-webkit-scrollbar {
+  width: 1px !important;
+  height: 1px !important;
+  background: transparent !important;
+}
+
+.tablist::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2) !important;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
 }
\ No newline at end of file