From 910b465932190cadfcb95a3f77991f0fb265044a Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Tue, 21 May 2024 22:11:53 +1000
Subject: [PATCH] fix clipped outlines in theme selector

---
 src/interface/components/BackgroundSelector.tsx | 2 +-
 src/interface/components/ThemeSelector.tsx      | 4 ++--
 src/interface/pages/SettingsPage/Themes.tsx     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/interface/components/BackgroundSelector.tsx b/src/interface/components/BackgroundSelector.tsx
index ab8b6b1f..638766b0 100644
--- a/src/interface/components/BackgroundSelector.tsx
+++ b/src/interface/components/BackgroundSelector.tsx
@@ -153,7 +153,7 @@ function BackgroundSelector({ isEditMode, disableTheme }: BackgroundSelectorProp
       </div>
     )}
 
-    <div className="relative">
+    <div className="relative px-1">
       <h2 className="pb-2 text-lg font-bold">Background Images</h2>
       <div className="flex flex-wrap gap-4">
         { isEditMode ? <></> :
diff --git a/src/interface/components/ThemeSelector.tsx b/src/interface/components/ThemeSelector.tsx
index 0500d54a..e3150867 100644
--- a/src/interface/components/ThemeSelector.tsx
+++ b/src/interface/components/ThemeSelector.tsx
@@ -189,7 +189,7 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
   return (
     <div
       ref={elementRef}
-      className={`my-3 ${isDragging ? '' : ''}`}
+      className={`my-3 w-full ${isDragging ? '' : ''}`}
       onDragOver={handleDragOver} 
       onDragLeave={handleDragLeave} 
       onDrop={handleDrop}
@@ -210,7 +210,7 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
         </div>
       </div>
       <h2 className="pb-2 text-lg font-bold">Themes</h2>
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2 px-1">
 
         {themes.map((theme) => (
           <ThemeCover
diff --git a/src/interface/pages/SettingsPage/Themes.tsx b/src/interface/pages/SettingsPage/Themes.tsx
index cf8355ed..90479e82 100644
--- a/src/interface/pages/SettingsPage/Themes.tsx
+++ b/src/interface/pages/SettingsPage/Themes.tsx
@@ -16,7 +16,7 @@ const Themes: FC = () => {
 
 
   return (
-  <div className="px-0.5">
+  <div className="">
       <button className="absolute top-12 z-20 right-0 p-2 text-[0.8rem] text-blue-500" onClick={() => setIsEditMode(!isEditMode)}>
         {isEditMode ? 'Done' : 'Edit'}
       </button>