From 37825092e4563b6ba8883582a3e7a026b8f59418 Mon Sep 17 00:00:00 2001
From: Philippe Martin <phmartin@redhat.com>
Date: Wed, 19 Jun 2024 11:30:56 +0200
Subject: [PATCH] fix: scroll

Signed-off-by: Philippe Martin <phmartin@redhat.com>
---
 .../src/pages/InferenceServerDetails.svelte   | 174 +++++++++---------
 1 file changed, 91 insertions(+), 83 deletions(-)

diff --git a/packages/frontend/src/pages/InferenceServerDetails.svelte b/packages/frontend/src/pages/InferenceServerDetails.svelte
index b9111b840..65324acef 100644
--- a/packages/frontend/src/pages/InferenceServerDetails.svelte
+++ b/packages/frontend/src/pages/InferenceServerDetails.svelte
@@ -122,7 +122,7 @@ export function goToUpPage(): void {
 }
 </script>
 
-<DetailsPage 
+<DetailsPage
   title="Service details"
   breadcrumbLeftPart="Model Services"
   breadcrumbRightPart="Service details"
@@ -152,102 +152,110 @@ export function goToUpPage(): void {
     {/if}
   </svelte:fragment>
   <svelte:fragment slot="content">
-    <div slot="content" class="flex flex-col min-w-full min-h-full">
-      <div class="min-w-full min-h-full flex-1">
-        <div class="mt-4 px-5 space-y-5">
-          {#if service !== undefined}
-            <!-- models info -->
-            <div class="bg-charcoal-800 rounded-md w-full px-4 pt-2 pb-4">
-              <div>
-                <span class="text-sm">Models</span>
-                <div class="w-full bg-charcoal-600 rounded-md p-2 flex flex-col gap-y-4">
-                  {#each service.models as model}
-                    <div class="flex flex-row gap-2 items-center">
-                      <div class="grow text-sm" aria-label="Model name">
-                        <a href="/model/{model.id}">{model.name}</a>
-                      </div>
-                      <div>
-                        <div
-                          class="bg-charcoal-800 rounded-md p-2 flex flex-row w-min h-min text-xs text-charcoal-100 text-nowrap items-center">
-                          <Fa class="mr-2" icon="{faScaleBalanced}" />
-                          {model.license}
+    <div slot="content" class="h-full overflow-y-auto">
+      <div class="flex flex-col min-w-full min-h-full">
+        <div class="min-w-full min-h-full flex-1">
+          <div class="mt-4 px-5 space-y-5">
+            {#if service !== undefined}
+              <!-- models info -->
+              <div class="bg-charcoal-800 rounded-md w-full px-4 pt-2 pb-4">
+                <div>
+                  <span class="text-sm">Models</span>
+                  <div class="w-full bg-charcoal-600 rounded-md p-2 flex flex-col gap-y-4">
+                    {#each service.models as model}
+                      <div class="flex flex-row gap-2 items-center">
+                        <div class="grow text-sm" aria-label="Model name">
+                          <a href="/model/{model.id}">{model.name}</a>
                         </div>
-                      </div>
-                      <div>
-                        <div
-                          class="bg-charcoal-800 rounded-md p-2 flex flex-row w-min h-min text-xs text-charcoal-100 text-nowrap items-center">
-                          <Fa class="mr-2" icon="{faBuildingColumns}" />
-                          {model.registry}
+                        <div>
+                          <div
+                            class="bg-charcoal-800 rounded-md p-2 flex flex-row w-min h-min text-xs text-charcoal-100 text-nowrap items-center">
+                            <Fa class="mr-2" icon="{faScaleBalanced}" />
+                            {model.license}
+                          </div>
+                        </div>
+                        <div>
+                          <div
+                            class="bg-charcoal-800 rounded-md p-2 flex flex-row w-min h-min text-xs text-charcoal-100 text-nowrap items-center">
+                            <Fa class="mr-2" icon="{faBuildingColumns}" />
+                            {model.registry}
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  {/each}
+                    {/each}
+                  </div>
                 </div>
               </div>
-            </div>
-
-            <!-- server details -->
-            <div class="bg-charcoal-800 rounded-md w-full px-4 pt-2 pb-4 mt-2">
-              <span class="text-sm">Server</span>
-              <div class="flex flex-row gap-4">
-                <div class="bg-charcoal-600 rounded-md p-2 flex flex-row w-min h-min text-xs text-nowrap items-center">
-                  http://localhost:{service.connection.port}/v1
-                </div>
 
-                <div class="bg-charcoal-600 rounded-md p-2 flex flex-row w-min h-min text-xs text-nowrap items-center">
-                  CPU Inference
-                  <Fa class="ml-2" icon="{faMicrochip}" />
+              <!-- server details -->
+              <div class="bg-charcoal-800 rounded-md w-full px-4 pt-2 pb-4 mt-2">
+                <span class="text-sm">Server</span>
+                <div class="flex flex-row gap-4">
+                  <div
+                    class="bg-charcoal-600 rounded-md p-2 flex flex-row w-min h-min text-xs text-nowrap items-center">
+                    http://localhost:{service.connection.port}/v1
+                  </div>
+
+                  <div
+                    class="bg-charcoal-600 rounded-md p-2 flex flex-row w-min h-min text-xs text-nowrap items-center">
+                    CPU Inference
+                    <Fa class="ml-2" icon="{faMicrochip}" />
+                  </div>
                 </div>
               </div>
-            </div>
-
-            <!-- code client -->
-            <div>
-              <div class="flex flex-row">
-                <span class="text-base grow">Client code</span>
-
-                <!-- language choice -->
-                <select
-                  required
-                  aria-label="snippet language selection"
-                  bind:value="{selectedLanguage}"
-                  on:change="{onLanguageChange}"
-                  id="languages"
-                  class="border text-sm rounded-lg focus:ring-purple-500 focus:border-purple-500 block p-1 bg-charcoal-900 border-charcoal-900 placeholder-gray-700 text-white"
-                  name="languages">
-                  {#each $snippetLanguages as language}
-                    <option class="my-1" value="{language.key}">{language.label}</option>
-                  {/each}
-                </select>
-                {#if selectedVariant !== undefined}
+
+              <!-- code client -->
+              <div>
+                <div class="flex flex-row">
+                  <span class="text-base grow">Client code</span>
+
+                  <!-- language choice -->
                   <select
                     required
-                    aria-label="snippet language variant"
-                    id="variants"
-                    bind:value="{selectedVariant}"
-                    on:change="{() => generate(selectedLanguage, selectedVariant)}"
-                    disabled="{variants.length === 1}"
-                    class="border ml-1 text-sm rounded-lg focus:ring-purple-500 focus:border-purple-500 block p-1 bg-charcoal-900 border-charcoal-900 placeholder-gray-700 text-white"
-                    name="variants">
-                    {#each variants as variant}
-                      <option class="my-1" value="{variant.key}">{variant.key}</option>
+                    aria-label="snippet language selection"
+                    bind:value="{selectedLanguage}"
+                    on:change="{onLanguageChange}"
+                    id="languages"
+                    class="border text-sm rounded-lg focus:ring-purple-500 focus:border-purple-500 block p-1 bg-charcoal-900 border-charcoal-900 placeholder-gray-700 text-white"
+                    name="languages">
+                    {#each $snippetLanguages as language}
+                      <option class="my-1" value="{language.key}">{language.label}</option>
                     {/each}
                   </select>
-                {/if}
-              </div>
+                  {#if selectedVariant !== undefined}
+                    <select
+                      required
+                      aria-label="snippet language variant"
+                      id="variants"
+                      bind:value="{selectedVariant}"
+                      on:change="{() => generate(selectedLanguage, selectedVariant)}"
+                      disabled="{variants.length === 1}"
+                      class="border ml-1 text-sm rounded-lg focus:ring-purple-500 focus:border-purple-500 block p-1 bg-charcoal-900 border-charcoal-900 placeholder-gray-700 text-white"
+                      name="variants">
+                      {#each variants as variant}
+                        <option class="my-1" value="{variant.key}">{variant.key}</option>
+                      {/each}
+                    </select>
+                  {/if}
+                </div>
 
-              {#if snippet !== undefined}
-                <div class="bg-charcoal-900 rounded-md w-full p-4 mt-2 relative">
-                  <code class="whitespace-break-spaces text-sm" bind:this="{code}">
-                    {snippet}
-                  </code>
-                  <div class="absolute right-4 top-4 z-10">
-                    <Button icon="{copied ? faCheck : faCopy}" type="secondary" title="Copy" on:click="{copySnippet}" />
+                {#if snippet !== undefined}
+                  <div class="bg-charcoal-900 rounded-md w-full p-4 mt-2 relative">
+                    <code class="whitespace-break-spaces text-sm" bind:this="{code}">
+                      {snippet}
+                    </code>
+                    <div class="absolute right-4 top-4 z-10">
+                      <Button
+                        icon="{copied ? faCheck : faCopy}"
+                        type="secondary"
+                        title="Copy"
+                        on:click="{copySnippet}" />
+                    </div>
                   </div>
-                </div>
-              {/if}
-            </div>
-          {/if}
+                {/if}
+              </div>
+            {/if}
+          </div>
         </div>
       </div>
     </div>