rocksky.app
A decentralized music tracking and discovery platform built on AT Protocol 🎵
rocksky.app
spotify
atproto
lastfm
musicbrainz
scrobbling
listenbrainz
Make right pane scrollable and limit search height
Set right pane height to calc(100vh-100px) and enable overflow-y-auto.
Change search results max height to !max-h-[400px]. Add popperOptions to
disable flip and enable preventOverflow for more stable dropdown
positioning.
tsiry-sandratraina.com
+1
-1
apps/web/src/layouts/Main.tsx
+1
-1
apps/web/src/layouts/Main.tsx
···
142
142
</Flex>
143
143
{withRightPane && (
144
144
<RightPane className="relative w-[300px]">
145
-
<div className="fixed top-[100px] w-[300px] bg-white p-[20px]">
145
+
<div className="fixed top-[100px] h-[calc(100vh-100px)] w-[300px] bg-white p-[20px] overflow-y-auto">
146
146
<div className="mb-[30px]">
147
147
<Search />
148
148
</div>
+7
-1
apps/web/src/layouts/Search/Search.tsx
+7
-1
apps/web/src/layouts/Search/Search.tsx
···
76
76
Search for "{keyword}"
77
77
</Header>
78
78
{results.length > 0 && (
79
-
<div className="p-[16px] overflow-y-auto min-h-[54px] max-h-[70vh]">
79
+
<div className="p-[16px] overflow-y-auto min-h-[54px] !max-h-[400px]">
80
80
{results.length > 0 && (
81
81
<>
82
82
{results.map((item: any) => (
···
286
286
style: {
287
287
backgroundColor: "var(--color-background)",
288
288
},
289
+
},
290
+
}}
291
+
popperOptions={{
292
+
modifiers: {
293
+
flip: { enabled: false },
294
+
preventOverflow: { enabled: true },
289
295
},
290
296
}}
291
297
>