appview-less bluesky client
fix height of following view list
+24
-4
+24
-4
src/components/FollowingView.svelte
+24
-4
src/components/FollowingView.svelte
···
191
191
return statsB.lastPostAt.getTime() - statsA.lastPostAt.getTime();
192
192
})
193
193
);
194
+
195
+
let listHeight = $state(0);
196
+
let listContainer: HTMLDivElement | undefined = $state();
197
+
198
+
const calcHeight = () => {
199
+
if (!listContainer) return;
200
+
const footer = document.getElementById('app-footer');
201
+
const footerHeight = footer?.getBoundingClientRect().height || 0;
202
+
const top = listContainer.getBoundingClientRect().top;
203
+
// 24px is our bottom padding
204
+
listHeight = Math.max(0, window.innerHeight - top - footerHeight - 24);
205
+
};
206
+
207
+
$effect(() => {
208
+
if (listContainer) {
209
+
calcHeight();
210
+
const observer = new ResizeObserver(calcHeight);
211
+
observer.observe(document.body);
212
+
return () => observer.disconnect();
213
+
}
214
+
});
194
215
</script>
195
216
196
217
<div class="flex h-full flex-col p-2">
···
216
237
</div>
217
238
</div>
218
239
219
-
<div class="min-h-0 flex-1">
240
+
<div class="min-h-0 flex-1" bind:this={listContainer}>
220
241
{#if sortedFollowing.length === 0}
221
242
<div class="flex justify-center py-8">
222
243
<div
···
224
245
style="border-color: var(--nucleus-accent) var(--nucleus-accent) var(--nucleus-accent) transparent;"
225
246
></div>
226
247
</div>
227
-
{:else}
228
-
<VirtualList height="70vh" itemCount={sortedFollowing.length} itemSize={76}>
248
+
{:else if listHeight > 0}
249
+
<VirtualList height={listHeight} itemCount={sortedFollowing.length} itemSize={76}>
229
250
{#snippet item({ index, style }: { index: number; style: string })}
230
251
{@const user = sortedFollowing[index]}
231
252
{@const stats = user.data!}
232
253
{@const lastPostAt = stats.lastPostAt}
233
254
{@const relTime = getRelativeTime(lastPostAt, currentTime)}
234
255
{@const color = generateColorForDid(user.did)}
235
-
<!-- box-border and pb-2 (0.5rem) simulates the gap-2 -->
236
256
<div {style} class="box-border w-full pb-2">
237
257
<div
238
258
class="group flex items-center gap-2 rounded-sm bg-(--nucleus-accent)/7 p-3 transition-colors hover:bg-(--post-color)/20"