Hugging Face's logo

Spaces:
huggingface
/
inference-playground
Running

App Files Community
5
victor HF Staff Thomas G. Lopes commited on
Commit
2ec23ab
·
unverified ·
1 Parent(s): 427a3a2

compact button groups (#81)

Browse files

<img width="520" alt="image"
src="https://github.com/user-attachments/assets/8757957d-fd64-4609-8d3e-21629e3f092f"
/>

---------

Co-authored-by: Thomas G. Lopes <[email protected]>

Files changed (1) hide show
  1. src/lib/components/inference-playground/message.svelte +12 -10
src/lib/components/inference-playground/message.svelte CHANGED
@@ -101,17 +101,19 @@
101
 
102
  <!-- Sticky wrapper for action buttons -->
103
  <div class={["top-8 z-10 self-start", shouldStick && "sticky"]}>
104
- <div class="flex flex-col items-start gap-1 @2xl:flex-row @2xl:gap-4">
 
 
105
  {#if canUploadImgs}
106
  <Tooltip openDelay={250}>
107
  {#snippet trigger(tooltip)}
108
  <button
109
  tabindex="0"
110
  type="button"
111
- class="mt-1.5 grid size-7 place-items-center rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900
112
  hover:bg-gray-100
113
  hover:text-blue-700 focus:z-10 focus:ring-4
114
- focus:ring-gray-100 focus:outline-hidden md:-mr-2 dark:border-gray-600
115
  dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
116
  {...tooltip.trigger}
117
  {...fileUpload.trigger}
@@ -135,10 +137,10 @@
135
  addToast({ data: { content: "✓", variant: "info" } });
136
  }}
137
  type="button"
138
- class="mt-1.5 grid size-7 place-items-center rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900 hover:bg-gray-100
139
  hover:text-blue-700
140
  focus:z-10 focus:ring-4 focus:ring-gray-100
141
- focus:outline-hidden md:-mr-2 dark:border-gray-600 dark:bg-gray-800
142
  dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
143
  {...tooltip.trigger}
144
  {...trigger}
@@ -157,10 +159,10 @@
157
  tabindex="0"
158
  onclick={onRegen}
159
  type="button"
160
- class="mt-1.5 grid size-7 place-items-center rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900 hover:bg-gray-100
161
  hover:text-blue-700
162
  focus:z-10 focus:ring-4 focus:ring-gray-100
163
- focus:outline-hidden md:-mr-2 dark:border-gray-600 dark:bg-gray-800
164
  dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
165
  {...tooltip.trigger}
166
  >
@@ -176,10 +178,10 @@
176
  tabindex="0"
177
  onclick={onDelete}
178
  type="button"
179
- class="mt-1.5 grid size-7 place-items-center rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900 hover:bg-gray-100
180
  hover:text-blue-700
181
  focus:z-10 focus:ring-4 focus:ring-gray-100
182
- focus:outline-hidden md:-mr-2 dark:border-gray-600 dark:bg-gray-800
183
  dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
184
  {...tooltip.trigger}
185
  >
@@ -205,7 +207,7 @@
205
  >
206
  <IconMaximize />
207
  </button>
208
- <img src={img} alt="uploaded" class="size-12 rounded-lg object-cover" />
209
  <button
210
  aria-label="remove"
211
  type="button"
 
101
 
102
  <!-- Sticky wrapper for action buttons -->
103
  <div class={["top-8 z-10 self-start", shouldStick && "sticky"]}>
104
+ <div
105
+ class="flex flex-none flex-col items-start @2xl:flex-row @max-2xl:[&>button]:-my-px @2xl:[&>button]:-mx-px @max-2xl:[&>button:first-of-type]:rounded-t-md @2xl:[&>button:first-of-type]:rounded-l-md @max-2xl:[&>button:last-of-type]:rounded-b-md @2xl:[&>button:last-of-type]:rounded-r-md"
106
+ >
107
  {#if canUploadImgs}
108
  <Tooltip openDelay={250}>
109
  {#snippet trigger(tooltip)}
110
  <button
111
  tabindex="0"
112
  type="button"
113
+ class="grid size-7 place-items-center border border-gray-200 bg-white text-xs font-medium text-gray-900
114
  hover:bg-gray-100
115
  hover:text-blue-700 focus:z-10 focus:ring-4
116
+ focus:ring-gray-100 focus:outline-hidden dark:border-gray-600
117
  dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
118
  {...tooltip.trigger}
119
  {...fileUpload.trigger}
 
137
  addToast({ data: { content: "✓", variant: "info" } });
138
  }}
139
  type="button"
140
+ class="grid size-7 place-items-center border border-gray-200 bg-white text-xs font-medium text-gray-900 hover:bg-gray-100
141
  hover:text-blue-700
142
  focus:z-10 focus:ring-4 focus:ring-gray-100
143
+ focus:outline-hidden dark:border-gray-600 dark:bg-gray-800
144
  dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
145
  {...tooltip.trigger}
146
  {...trigger}
 
159
  tabindex="0"
160
  onclick={onRegen}
161
  type="button"
162
+ class="grid size-7 place-items-center border border-gray-200 bg-white text-xs font-medium text-gray-900 hover:bg-gray-100
163
  hover:text-blue-700
164
  focus:z-10 focus:ring-4 focus:ring-gray-100
165
+ focus:outline-hidden dark:border-gray-600 dark:bg-gray-800
166
  dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
167
  {...tooltip.trigger}
168
  >
 
178
  tabindex="0"
179
  onclick={onDelete}
180
  type="button"
181
+ class="grid size-7 place-items-center border border-gray-200 bg-white text-xs font-medium text-gray-900 hover:bg-gray-100
182
  hover:text-blue-700
183
  focus:z-10 focus:ring-4 focus:ring-gray-100
184
+ focus:outline-hidden dark:border-gray-600 dark:bg-gray-800
185
  dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
186
  {...tooltip.trigger}
187
  >
 
207
  >
208
  <IconMaximize />
209
  </button>
210
+ <img src={img} alt="uploaded" class="size-12 object-cover" />
211
  <button
212
  aria-label="remove"
213
  type="button"