victor HF staff commited on
Commit
c867764
1 Parent(s): 8e300b6

Mobile: fix model selection (#448)

Browse files

* adjustments and mobile modal

* use dvh unit

* margin

src/lib/components/Modal.svelte CHANGED
@@ -54,7 +54,7 @@
54
  tabindex="-1"
55
  bind:this={modalEl}
56
  on:keydown={handleKeydown}
57
- class="-mt-10 overflow-hidden rounded-2xl bg-white shadow-2xl outline-none md:-mt-20 {width}"
58
  >
59
  <slot />
60
  </div>
 
54
  tabindex="-1"
55
  bind:this={modalEl}
56
  on:keydown={handleKeydown}
57
+ class="max-h-[90dvh] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none sm:-mt-10 sm:max-h-screen {width}"
58
  >
59
  <slot />
60
  </div>
src/lib/components/ModelCardMetadata.svelte CHANGED
@@ -9,7 +9,7 @@
9
  </script>
10
 
11
  <div
12
- class="flex items-center gap-5 rounded-xl bg-gray-100 px-3 py-2 text-sm
13
  {variant === 'dark'
14
  ? 'text-gray-600 dark:bg-gray-800 dark:text-gray-300'
15
  : 'text-gray-800 dark:bg-gray-100 dark:text-gray-600'}"
 
9
  </script>
10
 
11
  <div
12
+ class="flex items-center gap-5 rounded-xl bg-gray-100 px-3 py-2 text-xs sm:text-sm
13
  {variant === 'dark'
14
  ? 'text-gray-600 dark:bg-gray-800 dark:text-gray-300'
15
  : 'text-gray-800 dark:bg-gray-100 dark:text-gray-600'}"
src/lib/components/ModelsModal.svelte CHANGED
@@ -71,11 +71,15 @@
71
  {#each models as model}
72
  {@const active = model.id === selectedModelId}
73
  <div
74
- class="rounded-xl border border-gray-100 {active
75
- ? 'bg-gradient-to-r from-primary-200/40 via-primary-500/10'
76
  : ''}"
77
  >
78
- <label class="group flex cursor-pointer p-3" on:change aria-label={model.displayName}>
 
 
 
 
79
  <input
80
  type="radio"
81
  class="sr-only"
@@ -83,16 +87,16 @@
83
  value={model.id}
84
  bind:group={selectedModelId}
85
  />
86
- <span>
87
- <span class="text-md block font-semibold leading-tight text-gray-800"
88
- >{model.displayName}</span
89
- >
90
- {#if model.description}
91
- <span class="text-xs text-[#9FA8B5]">{model.description}</span>
92
- {/if}
93
- </span>
94
  <CarbonCheckmark
95
- class="-mr-1 -mt-1 ml-auto shrink-0 text-xl {active
96
  ? 'text-primary-400'
97
  : 'text-transparent group-hover:text-gray-200'}"
98
  />
@@ -106,7 +110,7 @@
106
  class="text-gray-500 hover:text-gray-900"
107
  on:click|preventDefault={onToggle}
108
  >
109
- <CarbonSave class="text-sm " />
110
  </button>
111
  <button
112
  class="text-gray-500 hover:text-gray-900"
@@ -114,14 +118,14 @@
114
  value = model.preprompt ?? "";
115
  }}
116
  >
117
- <CarbonRestart class="text-sm " />
118
  </button>
119
  {:else}
120
  <button
121
  class=" text-gray-500 hover:text-gray-900"
122
  on:click|preventDefault={onToggle}
123
  >
124
- <CarbonEdit class="text-sm " />
125
  </button>
126
  {/if}
127
  </div>
@@ -141,7 +145,7 @@
141
  </div>
142
  <button
143
  type="submit"
144
- class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-colors hover:ring"
145
  >
146
  Apply
147
  </button>
 
71
  {#each models as model}
72
  {@const active = model.id === selectedModelId}
73
  <div
74
+ class="relative rounded-xl border border-gray-100 {active
75
+ ? 'from-primary-200/40 via-primary-500/10 bg-gradient-to-r'
76
  : ''}"
77
  >
78
+ <label
79
+ class="group flex cursor-pointer flex-col p-3"
80
+ on:change
81
+ aria-label={model.displayName}
82
+ >
83
  <input
84
  type="radio"
85
  class="sr-only"
 
87
  value={model.id}
88
  bind:group={selectedModelId}
89
  />
90
+ <div
91
+ class="mb-1.5 block pr-8 text-sm font-semibold leading-tight text-gray-800 sm:text-base"
92
+ >
93
+ {model.displayName}
94
+ </div>
95
+ {#if model.description}
96
+ <div class="text-xs text-gray-500 sm:text-sm">{model.description}</div>
97
+ {/if}
98
  <CarbonCheckmark
99
+ class="absolute right-2 top-2 text-xl {active
100
  ? 'text-primary-400'
101
  : 'text-transparent group-hover:text-gray-200'}"
102
  />
 
110
  class="text-gray-500 hover:text-gray-900"
111
  on:click|preventDefault={onToggle}
112
  >
113
+ <CarbonSave class="text-sm" />
114
  </button>
115
  <button
116
  class="text-gray-500 hover:text-gray-900"
 
118
  value = model.preprompt ?? "";
119
  }}
120
  >
121
+ <CarbonRestart class="text-sm" />
122
  </button>
123
  {:else}
124
  <button
125
  class=" text-gray-500 hover:text-gray-900"
126
  on:click|preventDefault={onToggle}
127
  >
128
+ <CarbonEdit class="text-sm" />
129
  </button>
130
  {/if}
131
  </div>
 
145
  </div>
146
  <button
147
  type="submit"
148
+ class="sticky bottom-6 mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-colors hover:ring"
149
  >
150
  Apply
151
  </button>