csr tangled client in solid-js
better search layout on mobile
+31
-29
+1
-1
src/layout.tsx
+1
-1
src/layout.tsx
···
406
406
});
407
407
408
408
return (
409
-
<nav ref={(element) => { topbar = element; }} class="mx-auto space-x-4 px-6 py-2">
409
+
<nav ref={(element) => { topbar = element; }} class="mx-auto space-x-4 px-4 sm:px-6 py-2">
410
410
<div class="flex justify-between gap-4 p-0 items-center">
411
411
<div class="flex shrink-0 items-center gap-2">
412
412
<A href="/" class="flex shrink-0 items-center gap-2 no-underline hover:no-underline">
+29
-27
src/pages/search.tsx
+29
-27
src/pages/search.tsx
···
580
580
581
581
return (
582
582
<>
583
-
<h1 class="text-2xl font-bold mb-4 px-2">search</h1>
583
+
<h1 class="text-2xl font-bold mb-1 px-2">search</h1>
584
584
585
585
<div class="untangled-search-grid px-2">
586
586
<div class="untangled-search-main">
587
-
<form onSubmit={onSubmit} class="sticky top-0 z-10 py-3 bg-slate-100 dark:bg-gray-900 flex items-center gap-2">
588
-
<div class="flex relative w-full">
589
-
<div class="flex-1 flex relative">
590
-
<input
591
-
id="search-q"
592
-
value={draft()}
593
-
onInput={(event) => setDraft(event.currentTarget.value)}
594
-
placeholder="search..."
595
-
class="untangled-search-page-input peer"
596
-
/>
597
-
<A
598
-
href={clearHref()}
599
-
class={clsx(
600
-
'absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300',
601
-
!draft().trim() && 'hidden',
602
-
)}
603
-
>
604
-
<X class="w-4 h-4" />
605
-
</A>
587
+
<div class="sticky top-0 z-10 bg-slate-100 dark:bg-gray-900">
588
+
<form onSubmit={onSubmit} class="py-1.5 flex items-center gap-2">
589
+
<div class="flex relative w-full">
590
+
<div class="flex-1 flex relative">
591
+
<input
592
+
id="search-q"
593
+
value={draft()}
594
+
onInput={(event) => setDraft(event.currentTarget.value)}
595
+
placeholder="search..."
596
+
class="untangled-search-page-input peer"
597
+
/>
598
+
<A
599
+
href={clearHref()}
600
+
class={clsx(
601
+
'absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300',
602
+
!draft().trim() && 'hidden',
603
+
)}
604
+
>
605
+
<X class="w-4 h-4" />
606
+
</A>
607
+
</div>
608
+
<button type="submit" class="untangled-search-page-submit">
609
+
<Search class="w-4 h-4" />
610
+
</button>
606
611
</div>
607
-
<button type="submit" class="untangled-search-page-submit">
608
-
<Search class="w-4 h-4" />
609
-
</button>
610
-
</div>
611
-
</form>
612
+
</form>
612
613
613
-
<div class="md:hidden mt-3">
614
-
<TypeFilters query={q()} active={kind()} />
614
+
<div class="md:hidden pb-1.5">
615
+
<TypeFilters query={q()} active={kind()} />
616
+
</div>
615
617
</div>
616
618
617
619
<Show