From 755649a3c8469dbb02bc55a68ee117b1768c7f5f Mon Sep 17 00:00:00 2001
From: Bogdan Cerovac <BogdanCerovac@users.noreply.github.com>
Date: Mon, 23 Oct 2023 18:24:58 +0200
Subject: [PATCH] fix(web): trash link wrongly wrapped (#4586)

* Added missing alt text on logo in documentation

* Better to use CSS to do the uppercases

Some assistive technology can spell each letter instead of read the word, depends a lot on internals but it's better to prevent...

* Semantic fix - single paragraph instead of many + uppercase via CSS

Single sentence in single paragraph, using css instead

* React requires className instead of class...

* Unnest Trash link from Archive
---
 .../side-bar/side-bar.svelte                  | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/web/src/lib/components/shared-components/side-bar/side-bar.svelte b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
index 740513a704..873de19f2f 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
@@ -141,25 +141,25 @@
         {/await}
       </svelte:fragment>
     </SideBarButton>
-
-    {#if $featureFlags.trash}
-      <a data-sveltekit-preload-data="hover" href={AppRoute.TRASH} draggable="false">
-        <SideBarButton title="Trash" logo={TrashCanOutline} isSelected={isTrashSelected}>
-          <svelte:fragment slot="moreInformation">
-            {#await getStats({ isTrashed: true })}
-              <LoadingSpinner />
-            {:then data}
-              <div>
-                <p>{data.videos.toLocaleString($locale)} Videos</p>
-                <p>{data.images.toLocaleString($locale)} Photos</p>
-              </div>
-            {/await}
-          </svelte:fragment>
-        </SideBarButton>
-      </a>
-    {/if}
   </a>
 
+  {#if $featureFlags.trash}
+    <a data-sveltekit-preload-data="hover" href={AppRoute.TRASH} draggable="false">
+      <SideBarButton title="Trash" logo={TrashCanOutline} isSelected={isTrashSelected}>
+        <svelte:fragment slot="moreInformation">
+          {#await getStats({ isTrashed: true })}
+            <LoadingSpinner />
+          {:then data}
+            <div>
+              <p>{data.videos.toLocaleString($locale)} Videos</p>
+              <p>{data.images.toLocaleString($locale)} Photos</p>
+            </div>
+          {/await}
+        </svelte:fragment>
+      </SideBarButton>
+    </a>
+  {/if}
+
   <!-- Status Box -->
   <div class="mb-6 mt-auto">
     <StatusBox />