dylanebert commited on
Commit
bc9b59d
·
1 Parent(s): db9635c

smaller screens fit

Browse files
src/lib/components/chat/ExampleRow.svelte CHANGED
@@ -148,7 +148,8 @@
148
  font-size: 0.7rem;
149
  color: rgba(255, 255, 255, 0.65);
150
  will-change: transform, box-shadow;
151
- white-space: nowrap;
 
152
  }
153
 
154
  .example-pill:hover {
@@ -160,24 +161,61 @@
160
  .example-icon {
161
  font-size: 0.75rem;
162
  opacity: 0.8;
 
163
  }
164
 
165
  .example-text {
166
  font-size: 0.7rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  }
168
 
169
- @media (max-width: 600px) {
170
  .examples-row {
171
  flex-direction: column;
172
  align-items: stretch;
173
  gap: 0.5rem;
174
- padding: 0.75rem;
175
  }
 
176
  .examples-label {
177
  text-align: center;
 
178
  }
 
179
  .examples-list {
180
  justify-content: center;
181
  }
 
 
 
 
 
 
 
 
 
 
 
182
  }
183
  </style>
 
148
  font-size: 0.7rem;
149
  color: rgba(255, 255, 255, 0.65);
150
  will-change: transform, box-shadow;
151
+ flex-shrink: 0;
152
+ min-width: 0;
153
  }
154
 
155
  .example-pill:hover {
 
161
  .example-icon {
162
  font-size: 0.75rem;
163
  opacity: 0.8;
164
+ flex-shrink: 0;
165
  }
166
 
167
  .example-text {
168
  font-size: 0.7rem;
169
+ white-space: nowrap;
170
+ overflow: hidden;
171
+ text-overflow: ellipsis;
172
+ }
173
+
174
+ @media (max-width: 768px) {
175
+ .examples-row {
176
+ gap: 0.75rem;
177
+ padding: 0.75rem;
178
+ }
179
+
180
+ .examples-list {
181
+ gap: 0.4rem;
182
+ }
183
+
184
+ .example-pill {
185
+ padding: 0.25rem 0.5rem;
186
+ font-size: 0.65rem;
187
+ }
188
+
189
+ .example-text {
190
+ font-size: 0.65rem;
191
+ }
192
  }
193
 
194
+ @media (max-width: 480px) {
195
  .examples-row {
196
  flex-direction: column;
197
  align-items: stretch;
198
  gap: 0.5rem;
 
199
  }
200
+
201
  .examples-label {
202
  text-align: center;
203
+ font-size: 0.65rem;
204
  }
205
+
206
  .examples-list {
207
  justify-content: center;
208
  }
209
+
210
+ .example-pill {
211
+ flex: 0 1 auto;
212
+ max-width: calc(50% - 0.25rem);
213
+ }
214
+ }
215
+
216
+ @media (max-width: 360px) {
217
+ .example-pill {
218
+ max-width: 100%;
219
+ }
220
  }
221
  </style>
src/lib/components/chat/context.md CHANGED
@@ -11,7 +11,7 @@ AI chat interface with enhanced contrast dark theme and dopamine-driven micro-in
11
  - `TextRenderer.svelte` - Progressive text reveal with streaming-aware tool call filtering
12
  - `MessageInput.svelte` - Input with charge-up animations and success feedback
13
  - `ExampleMessages.svelte` - Model limitations warning when chat is empty
14
- - `ExampleRow.svelte` - Horizontal example prompts above input
15
  - `segments/ToolBlock.svelte` - Tool execution with icons, colors, and progress bars
16
  - `segments/TodoSegment.svelte` - Task tracker with progress bar and milestone celebrations
17
 
 
11
  - `TextRenderer.svelte` - Progressive text reveal with streaming-aware tool call filtering
12
  - `MessageInput.svelte` - Input with charge-up animations and success feedback
13
  - `ExampleMessages.svelte` - Model limitations warning when chat is empty
14
+ - `ExampleRow.svelte` - Responsive example prompts above input
15
  - `segments/ToolBlock.svelte` - Tool execution with icons, colors, and progress bars
16
  - `segments/TodoSegment.svelte` - Task tracker with progress bar and milestone celebrations
17