atmosphere explorer
pds.ls
tool
typescript
atproto
wrap stream inputs on small viewports
+7
-5
+7
-5
src/views/stream/index.tsx
+7
-5
src/views/stream/index.tsx
···
369
369
{/* Connection Form */}
370
370
<Show when={!connected()}>
371
371
<form ref={formRef} class="flex w-full flex-col gap-2 p-2 text-sm">
372
-
<label class="flex items-center justify-end gap-x-1">
373
-
<span class="min-w-21 select-none">Instance</span>
372
+
<label class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-end sm:gap-x-1">
373
+
<span class="select-none sm:min-w-21">Instance</span>
374
374
<TextInput
375
375
name="instance"
376
376
value={searchParams.instance ?? config().defaultInstance}
···
384
384
let pickerRef!: HTMLInputElement;
385
385
return (
386
386
<label
387
-
class={`flex justify-end gap-x-1 ${field.type === "tags" ? "items-start" : "items-center"}`}
387
+
class={`flex gap-x-1 ${field.type === "checkbox" ? "items-center justify-end" : `flex-col gap-1 sm:flex-row sm:justify-end ${field.type === "tags" ? "sm:items-start" : "sm:items-center"}`}`}
388
388
>
389
389
<Show when={field.type === "checkbox"}>
390
390
<input
···
394
394
checked={searchParams[field.searchParam] === "on"}
395
395
/>
396
396
</Show>
397
-
<span class={`min-w-21 select-none ${field.type === "tags" ? "mt-1" : ""}`}>
397
+
<span
398
+
class={`select-none ${field.type === "checkbox" ? "min-w-21" : "sm:min-w-21"} ${field.type === "tags" ? "sm:mt-1" : ""}`}
399
+
>
398
400
{field.label}
399
401
</span>
400
402
<Show when={field.type === "tags"}>
···
410
412
</Show>
411
413
412
414
<Show when={field.type === "text"}>
413
-
<div class="flex grow flex-col flex-wrap gap-1.5 sm:flex-row sm:items-center">
415
+
<div class="flex grow flex-wrap items-center gap-1.5">
414
416
<TextInput
415
417
ref={inputRef}
416
418
name={field.name}