From e3d976a2e708758707ef8ad38beb45e70b2fd84b Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 28 Jun 2022 14:26:59 -0400
Subject: [PATCH] Account for smaller screens

---
 .../features/ui/components/background_shapes.tsx       |  2 +-
 app/styles/application.scss                            | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx
index af9393f3b..50bdef350 100644
--- a/app/soapbox/features/ui/components/background_shapes.tsx
+++ b/app/soapbox/features/ui/components/background_shapes.tsx
@@ -9,7 +9,7 @@ interface IBackgroundShapes {
 /** Gradient that appears in the background of the UI. */
 const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
   <div className={classNames(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}>
-    <div className='w-screen h-screen bg-gradient' />
+    <div className='w-screen h-screen bg-gradient-sm lg:bg-gradient-lg' />
   </div>
 );
 
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 9bed26cec..1dcd2efd5 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -94,7 +94,7 @@
     height: 100dvh;
   }
 
-  .bg-gradient {
+  .bg-gradient-lg {
     background: linear-gradient(
       112deg,
       rgba(0, 0, 0, 0) 0%,
@@ -105,6 +105,14 @@
       rgba(0, 0, 0, 0) 100%
     );
   }
+
+  .bg-gradient-sm {
+    background: linear-gradient(
+      112deg,
+      rgba(var(--color-gradient-start) / 0.1) 0%,
+      rgba(var(--color-gradient-end) / 0.1) 50%
+    );
+  }
 }
 
 @import 'forms';