fix clipped outlines in theme selector

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 ? <></> :

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

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>