From 8ecf47412945da4db93779d4678955d3a1c83931 Mon Sep 17 00:00:00 2001
From: Luca Stocchi <49404737+lstocchi@users.noreply.github.com>
Date: Wed, 10 Jul 2024 11:13:18 +0200
Subject: [PATCH] fix: resize terminal so it is entirely visible (#7999)

* fix: resize terminal so it is entirely visible

Signed-off-by: lstocchi <lstocchi@redhat.com>

* fix: add min-h-0 to handle window resizing

Signed-off-by: lstocchi <lstocchi@redhat.com>

---------

Signed-off-by: lstocchi <lstocchi@redhat.com>
---
 .../src/lib/pod/KubernetesTerminal.svelte     |  2 +-
 .../lib/pod/KubernetesTerminalBrowser.svelte  | 72 ++++++++++---------
 2 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/packages/renderer/src/lib/pod/KubernetesTerminal.svelte b/packages/renderer/src/lib/pod/KubernetesTerminal.svelte
index 9dd073384bf..24d5a0d5633 100644
--- a/packages/renderer/src/lib/pod/KubernetesTerminal.svelte
+++ b/packages/renderer/src/lib/pod/KubernetesTerminal.svelte
@@ -153,4 +153,4 @@ function saveTerminalState(podName: string, containerName: string, state: State)
 }
 </script>
 
-<div class="h-full" bind:this="{terminalXtermDiv}"></div>
+<div class="h-full w-full" bind:this="{terminalXtermDiv}"></div>
diff --git a/packages/renderer/src/lib/pod/KubernetesTerminalBrowser.svelte b/packages/renderer/src/lib/pod/KubernetesTerminalBrowser.svelte
index ab579dbac43..01f793e54a3 100644
--- a/packages/renderer/src/lib/pod/KubernetesTerminalBrowser.svelte
+++ b/packages/renderer/src/lib/pod/KubernetesTerminalBrowser.svelte
@@ -38,47 +38,51 @@ function handleSelectionChange(event: Event) {
 }
 </script>
 
-<div class="flex py-2">
-  <label
-    for="input-standard-{pod.name}"
-    class="block w-auto text-sm font-medium whitespace-nowrap leading-6 text-gray-900 pl-2 pr-2">
+<div class="flex flex-col h-full">
+  <div class="flex py-2 h-[40px]">
+    <label
+      for="input-standard-{pod.name}"
+      class="block w-auto text-sm font-medium whitespace-nowrap leading-6 text-gray-900 pl-2 pr-2">
+      {#key key}
+        {#if terminalService.hasTerminal(pod.name, currentContainerName) && currentContainerStatus.get(currentContainerName) === 'running'}
+          Connected to:
+        {:else}
+          Connecting to:
+        {/if}
+      {/key}
+    </label>
+    <div class="w-full">
+      {#if pod.containers.length > 1}
+        <select
+          on:change="{handleSelectionChange}"
+          aria-labelledby="listbox-label"
+          class="block w-48 p-1 outline-none text-sm bg-charcoal-800 rounded-sm text-gray-700 placeholder-gray-700"
+          name="{pod.name}"
+          id="input-standard-{pod.name}">
+          {#each pod.containers as container}
+            <option value="{container.Names}">{container.Names}</option>
+          {/each}
+        </select>
+      {:else}
+        <span
+          id="input-standard-{pod.name}"
+          class="block text-sm font-bold leading-6 text-gray-900"
+          aria-labelledby="listbox-label">{currentContainerName}</span>
+      {/if}
+    </div>
+  </div>
+
+  <div class="flex grow w-full min-h-0">
     {#key key}
       {#if terminalService.hasTerminal(pod.name, currentContainerName) && currentContainerStatus.get(currentContainerName) === 'running'}
-        Connected to:
-      {:else}
-        Connecting to:
+        <svelte:component
+          this="{terminalService.getTerminal(pod.name, currentContainerName).component}"
+          {...terminalService.getTerminal(pod.name, currentContainerName).props} />
       {/if}
     {/key}
-  </label>
-  <div class="w-full">
-    {#if pod.containers.length > 1}
-      <select
-        on:change="{handleSelectionChange}"
-        aria-labelledby="listbox-label"
-        class="block w-48 p-1 outline-none text-sm bg-charcoal-800 rounded-sm text-gray-700 placeholder-gray-700"
-        name="{pod.name}"
-        id="input-standard-{pod.name}">
-        {#each pod.containers as container}
-          <option value="{container.Names}">{container.Names}</option>
-        {/each}
-      </select>
-    {:else}
-      <span
-        id="input-standard-{pod.name}"
-        class="block text-sm font-bold leading-6 text-gray-900"
-        aria-labelledby="listbox-label">{currentContainerName}</span>
-    {/if}
   </div>
 </div>
 
-{#key key}
-  {#if terminalService.hasTerminal(pod.name, currentContainerName) && currentContainerStatus.get(currentContainerName) === 'running'}
-    <svelte:component
-      this="{terminalService.getTerminal(pod.name, currentContainerName).component}"
-      {...terminalService.getTerminal(pod.name, currentContainerName).props} />
-  {/if}
-{/key}
-
 <EmptyScreen
   hidden="{!currentContainerStatus.get(currentContainerName)}"
   icon="{NoLogIcon}"