The most basic updates to the terminal page experience

src/app.postcss

@@ -88,3 +88,26 @@ input:focus {
 .inner-diff {
 	border-radius: 2px;
 }
+
+/* Terminal */
+#terminal {
+	padding-right: 4px;
+	background-color: black;
+}
+.terminal {
+	height: 100%;
+	width: 100%;
+	@apply p-8;
+}
+.xtrem {
+	height: 100%;
+	width: 100%;
+}
+.xterm-viewport {
+}
+.xterm-scroll-area {
+	padding: 24px;
+}
+.xterm-screen {
+	wdith: 100% !important;
+}

src/lib/components/Button/Button.svelte

@@ -9,7 +9,7 @@
 	export let outlined = false;
 	export let disabled = false;
 	export let height: 'basic' | 'small' = 'basic';
-	export let width: 'basic' | 'long' = 'basic';
+	export let width: 'basic' | 'full-width' = 'basic';
 	export let type: 'button' | 'submit' = 'button';
 	export let href: string | undefined = undefined;
 	export let icon: ComponentType | undefined = undefined;
@@ -30,7 +30,7 @@
 		class={role}
 		bind:this={element}
 		class:small={height === 'small'}
-		class:long={width === 'long'}
+		class:full-width={width === 'full-width'}
 		class:filled
 		class:pointer-events-none={loading}
 		class:outlined
@@ -58,7 +58,7 @@
 	<button
 		class={role}
 		class:small={height === 'small'}
-		class:long={width === 'long'}
+		class:full-width={width === 'full-width'}
 		class:pointer-events-none={loading}
 		bind:this={element}
 		class:filled
@@ -179,8 +179,8 @@
 		@apply py-[1px];
 	}
 
-	.filled.long,
+	.filled.full-width,
-	.outlined.long {
+	.outlined.full-width {
-		@apply px-[42px];
+		@apply w-full;
 	}
 </style>

src/lib/components/Terminal.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <!-- Actual terminal -->
-<div class="flex h-full w-full flex-row">
+<div class="terminal-component flex h-full w-full flex-row">
 	<div
 		id="terminal"
 		class="h-full w-full"
@@ -37,3 +37,12 @@
 	/>
 	<ResizeObserver on:resize={handleTermResize} />
 </div>
+
+<style>
+	.terminal-component {
+		@apply flex h-full w-full flex-row;
+	}
+	.terminal-component #terminal {
+		@apply h-full w-full;
+	}
+</style>

src/routes/projects/[projectId]/+layout.svelte

@@ -70,15 +70,19 @@
 				>
 					⌘K
 				</div>
-				<a href="/projects/{$project?.id}/terminal">
-					<IconTerminal class="h-6 w-6" />
-				</a>
 			</div>
 
-			<ul>
+			<ul class="flex gap-2">
+				<li>
+					<Tooltip label="Terminal">
+						<a class="block rounded p-1 hover:bg-zinc-700 text-zinc-400 hover:text-zinc-200" href="/projects/{$project?.id}/terminal">
+							<IconTerminal class="h-6 w-6" />
+						</a>
+					</Tooltip>
+				</li>
 				<li>
 					<Tooltip label="Project settings">
-						<Button filled={false} href="/projects/{$project?.id}/settings">
+						<a class="block rounded p-1 hover:bg-zinc-700 text-zinc-400 hover:text-zinc-200" href="/projects/{$project?.id}/settings">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								fill="none"
@@ -98,7 +102,7 @@
 									d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
 								/>
 							</svg>
-						</Button>
+						</a>
 					</Tooltip>
 				</li>
 			</ul>

src/routes/projects/[projectId]/terminal/+page.svelte

@@ -3,6 +3,7 @@
 	import type { LayoutData } from '../$types';
 	import Terminal from '$lib/components/Terminal.svelte';
 	import * as terminals from '$lib/terminals';
+	import Button from '$lib/components/Button/Button.svelte';
 
 	export let data: LayoutData;
 	const { project, statuses } = data;
@@ -22,15 +23,20 @@
 </script>
 
 <!-- Actual terminal -->
-<div class="flex h-full w-full flex-row">
+<div class="terminal-page flex flex h-full w-full flex-row">
-	<div class="h-full w-80 p-2">
+	<div class="main-content h-full w-2/3">
-		<div class="p-2 font-bold">Git Status</div>
+		{#if terminalSession}
+			<Terminal session={terminalSession} bind:this={terminal} />
+		{/if}
+	</div>
+	<div class="right-panel h-full w-1/3  p-2">
+		<h2 class="p-2 pb-4 text-lg font-bold text-zinc-300">Git Status</h2>
 		{#if $statuses.length == 0}
 			<div class="rounded border border-green-400 bg-green-600 p-2 font-mono text-green-900">
 				No changes
 			</div>
 		{:else}
-			<ul class="rounded border border-yellow-400 bg-yellow-500 p-2 font-mono text-yellow-900">
+			<ul class="mx-2 rounded border border-yellow-400 bg-yellow-500 p-2 font-mono text-yellow-900">
 				{#each $statuses as activity}
 					<li class="flex w-full gap-2">
 						<span
@@ -44,14 +50,11 @@
 			</ul>
 		{/if}
 		<div class="mt-4 p-2 font-bold">Commands</div>
-		<ul class="px-2">
+		<ul class="px-2  ">
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<li class="cursor-pointer" on:click={() => runCommand('git push')}>Push Commit</li>
+			<Button role="primary" width="full-width" on:click={() => runCommand('git push')}
+				>Push Commit</Button
+			>
 		</ul>
 	</div>
-	<div class="h-full w-full">
-		{#if terminalSession}
-			<Terminal session={terminalSession} bind:this={terminal} />
-		{/if}
-	</div>
 </div>