Hugging Face's logo

Spaces:
huggingface
/
inference-playground
Running

App Files Community
4
victor HF staff commited on
Commit
ed2f767
·
1 Parent(s): a8fc54a

layout

Browse files
Files changed (1) hide show
  1. src/lib/components/Playground/Playground.svelte +15 -10
src/lib/components/Playground/Playground.svelte CHANGED
@@ -92,17 +92,22 @@
92
  ></textarea>
93
  </div>
94
  <div class="relative divide-y divide-gray-200">
95
- {#each messages as message, i}
96
- <PlaygroundMessage {message} on:delete={() => deleteMessage(i)} />
97
- {/each}
 
98
 
99
- <button
100
- class="grid w-full grid-cols-[130px,1fr] items-center py-6 hover:bg-gray-50"
101
- on:click={addMessage}
 
 
 
 
 
 
 
102
  >
103
- <div class="button !p-0 text-sm font-semibold">Add message</div>
104
- </button>
105
- <div class="absolute inset-x-0 bottom-0 flex h-20 items-center gap-2 whitespace-nowrap px-5">
106
  <button
107
  type="button"
108
  class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
@@ -149,7 +154,7 @@
149
  </button>
150
  </div>
151
  </div>
152
- <div class="flex flex-col gap-6 p-5">
153
  <PlaygroundOptions {compatibleModels} bind:currentModel />
154
  </div>
155
  </div>
 
92
  ></textarea>
93
  </div>
94
  <div class="relative divide-y divide-gray-200">
95
+ <div class="flex max-h-[calc(100dvh-5rem)] flex-col divide-y divide-gray-200 overflow-y-auto">
96
+ {#each messages as message, i}
97
+ <PlaygroundMessage {message} on:delete={() => deleteMessage(i)} />
98
+ {/each}
99
 
100
+ <button
101
+ class="grid w-full grid-cols-[130px,1fr] items-center py-6 hover:bg-gray-50"
102
+ on:click={addMessage}
103
+ >
104
+ <div class="button !p-0 text-sm font-semibold">Add message</div>
105
+ </button>
106
+ </div>
107
+
108
+ <div
109
+ class="inset-x-0 bottom-0 flex h-20 items-center gap-2 overflow-hidden whitespace-nowrap px-5 md:absolute"
110
  >
 
 
 
111
  <button
112
  type="button"
113
  class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
 
154
  </button>
155
  </div>
156
  </div>
157
+ <div class="flex flex-col gap-6 overflow-hidden p-5">
158
  <PlaygroundOptions {compatibleModels} bind:currentModel />
159
  </div>
160
  </div>