From 7181f9301b72935f38ededdf0291a06c3a29cd15 Mon Sep 17 00:00:00 2001
From: Lilian <lilian@blahaj.space>
Date: Thu, 20 Jun 2024 20:03:28 +0200
Subject: [PATCH] [frontend] VirtualScroller: CSS and layout fixes

---
 .../Components/VirtualScroller.razor          | 20 ++++++++++---------
 .../Components/VirtualScroller.razor.css      |  8 +++++++-
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/VirtualScroller.razor b/Iceshrimp.Frontend/Components/VirtualScroller.razor
index 150b4fb7..ac7b7b49 100644
--- a/Iceshrimp.Frontend/Components/VirtualScroller.razor
+++ b/Iceshrimp.Frontend/Components/VirtualScroller.razor
@@ -29,7 +29,12 @@
         Loading!
     </div>
     }
-    <div @ref="@_padBotRef" class="padding bottom" style="height: @(State.PadBottom + "px")"></div>
+    else
+    {
+        <div class="target"><span>The end!<button @onclick="Down">Load more!</button></span></div>
+    }
+    <div @ref="@_padBotRef" class="padding bottom" style="height: @(State.PadBottom + "px")">
+    </div>
 </div>
 
 @code {
@@ -77,7 +82,7 @@
         loadingBottom = false;
         StateHasChanged();
     }
-    
+
     private async Task LoadNewer()
     {
         _loadingTop = true;
@@ -99,7 +104,7 @@
         for (int i = 0; i < amount; i++)
         {
             var height = await Module.InvokeAsync<int>("GetHeight", _refs[i]);
-            State.PadTop                     += height;
+            State.PadTop                           += height;
             State.Height[State.RenderedList[i].Id] =  height;
         }
 
@@ -147,7 +152,7 @@
         for (int i = 0; i < UpdateCount; i++)
         {
             var height = await Module.InvokeAsync<int>("GetHeight", _refs[i]);
-            State.PadBottom                  += height;
+            State.PadBottom                        += height;
             State.Height[State.RenderedList[i].Id] =  height;
         }
 
@@ -170,10 +175,7 @@
     private async Task SetupObservers()
     {
         // Enabling root margin causes erratic virtual scroller behavior, i've not figured out why
-        var options = new IntersectionObserverOptions
-        {
-            RootMargin = "100%"
-        };
+        var options = new IntersectionObserverOptions { RootMargin = "100%" };
         OvrscrlObsvTop    = await ObserverService.Create(OverscrollCallbackTop);
         OvrscrlObsvBottom = await ObserverService.Create(OverscrollCallbackBottom);
 
@@ -236,7 +238,7 @@
 
     protected override void OnInitialized()
     {
-        try 
+        try
         {
             var virtualScrollerState = StateService.VirtualScroller.GetState("home");
             State     = virtualScrollerState;
diff --git a/Iceshrimp.Frontend/Components/VirtualScroller.razor.css b/Iceshrimp.Frontend/Components/VirtualScroller.razor.css
index 10ec83f8..0f7067fa 100644
--- a/Iceshrimp.Frontend/Components/VirtualScroller.razor.css
+++ b/Iceshrimp.Frontend/Components/VirtualScroller.razor.css
@@ -1,10 +1,16 @@
 .padding {
     width: 1px;
+    min-height: 1px;
+}
+.bottom {
+    min-height: 1rem;
+    @media (max-width: 1000px){
+        min-height: 5rem;
+    }
 }
 .scroller {
     display: flex;
     flex-direction: column;
-    overflow-y: scroll;
     overflow-x: clip;
     width: 100%;
     align-items: center;