Fix console rendering on Safari; closes #4189

resources/scripts/components/server/console/Console.tsx

@@ -9,15 +9,16 @@ import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { ServerContext } from '@/state/server';
 import { usePermissions } from '@/plugins/usePermissions';
 import { theme as th } from 'twin.macro';
-import 'xterm/css/xterm.css';
 import useEventListener from '@/plugins/useEventListener';
 import { debounce } from 'debounce';
 import { usePersistedState } from '@/plugins/usePersistedState';
 import { SocketEvent, SocketRequest } from '@/components/server/events';
 import classNames from 'classnames';
-import styles from './style.module.css';
 import { ChevronDoubleRightIcon } from '@heroicons/react/solid';
 
+import 'xterm/css/xterm.css';
+import styles from './style.module.css';
+
 const theme = {
     background: th`colors.black`.toString(),
     cursor: 'transparent',
@@ -45,7 +46,7 @@ const terminalProps: ITerminalOptions = {
     cursorStyle: 'underline',
     allowTransparency: true,
     fontSize: 12,
-    fontFamily: 'Menlo, Monaco, Consolas, monospace',
+    fontFamily: th('fontFamily.mono'),
     rows: 30,
     theme: theme,
 };
@@ -197,7 +198,9 @@ export default () => {
             <div
                 className={classNames(styles.container, styles.overflows_container, { 'rounded-b': !canSendCommands })}
             >
-                <div id={styles.terminal} ref={ref} />
+                <div className={'h-full'}>
+                    <div id={styles.terminal} ref={ref} />
+                </div>
             </div>
             {canSendCommands && (
                 <div className={classNames('relative', styles.overflows_container)}>

resources/scripts/components/server/console/ServerConsoleContainer.tsx

@@ -21,15 +21,15 @@ const ServerConsoleContainer = () => {
     const eggFeatures = ServerContext.useStoreState((state) => state.server.data!.eggFeatures, isEqual);
 
     return (
-        <ServerContentBlock title={'Console'} className={'flex flex-col gap-2 sm:gap-4'}>
+        <ServerContentBlock title={'Console'}>
             {(isInstalling || isTransferring) && (
-                <Alert type={'warning'}>
+                <Alert type={'warning'} className={'mb-4'}>
                     {isInstalling
                         ? 'This server is currently running its installation process and most actions are unavailable.'
                         : 'This server is currently being transferred to another node and all actions are unavailable.'}
                 </Alert>
             )}
-            <div className={'grid grid-cols-4 gap-4'}>
+            <div className={'grid grid-cols-4 gap-4 mb-4'}>
                 <div className={'hidden sm:block sm:col-span-2 lg:col-span-3 pr-4'}>
                     <h1 className={'font-header text-2xl text-gray-50 leading-relaxed line-clamp-1'}>{name}</h1>
                     <p className={'text-sm line-clamp-2'}>{description}</p>
@@ -40,8 +40,8 @@ const ServerConsoleContainer = () => {
                     </Can>
                 </div>
             </div>
-            <div className={'grid grid-cols-4 gap-2 sm:gap-4'}>
-                <div className={'col-span-4 lg:col-span-3'}>
+            <div className={'grid grid-cols-4 gap-2 sm:gap-4 mb-4'}>
+                <div className={'flex col-span-4 lg:col-span-3'}>
                     <Spinner.Suspense>
                         <Console />
                     </Spinner.Suspense>

resources/scripts/components/server/console/style.module.css

@@ -19,7 +19,7 @@
 }
 
 .terminal {
-    @apply relative h-full flex flex-col;
+    @apply flex flex-col w-full;
 
     & .overflows_container {
         @apply -ml-4 sm:ml-0;