Fix white border of blurry background (#2016)

## Description:

Small change to remove the white blurry border on the background image.
This was due to the filter kernel also including the white html
background.

Before:
<img width="2559" height="1251" alt="image"
src="https://github.com/user-attachments/assets/f52ea3e7-4da0-4e74-a8bd-26686eccf05e"
/>

After:
<img width="2559" height="1249" alt="image"
src="https://github.com/user-attachments/assets/16a756ad-6e78-4d4a-bcc3-b65b93e393d3"
/>

This also works on light mode but the change is less pronounced so I
haven't included images.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

Please comment on this PR

src/client/index.html

@@ -65,12 +65,19 @@
         left: 0;
         width: 100%;
         height: 100%;
-        filter: blur(4px);
         z-index: -1;
       }
 
+      .bg-image::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100vh;
+        backdrop-filter: blur(5px);
+      }
+
       .dark .bg-image {
-        filter: blur(4px) brightness(0.4) saturate(0.3) contrast(1.2);
+        filter: brightness(0.4) saturate(0.3) contrast(1.2);
       }
 
       /* display:none if child has class parent-hidden since we can't use shadow DOM in Lit due to Tailwind */