feat: make themes list responsive on mobile

Author: eldomagan

public/vendor/bagistoplus/visual/admin/assets/admin-D9L8d6iJ.css

@@ -1,6 +1,6 @@
 {
   "resources/assets/admin/css/admin.css": {
-    "file": "assets/admin-DG7nhQX9.css",
+    "file": "assets/admin-D9L8d6iJ.css",
     "src": "resources/assets/admin/css/admin.css",
     "isEntry": true,
     "names": [

public/vendor/bagistoplus/visual/admin/assets/admin-DG7nhQX9.css

@@ -11,12 +11,18 @@
   </div>
   <div class="mt-8 max-w-3xl">
     @forelse($themes as  $theme)
-      <div class="relative mb-6 min-h-[16rem] rounded border border-gray-200 bg-white px-8 pb-8 pt-8 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300">
-        <div class="absolute inset-y-0 right-0 h-full w-[360px] bg-cover bg-no-repeat"
+      <div
+        class="relative mb-6 overflow-hidden rounded border border-gray-200 bg-white sm:min-h-[16rem] sm:px-8 sm:pb-8 md:pt-8 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
+      >
+        <div class="absolute inset-y-0 right-0 h-full w-[360px] bg-cover bg-no-repeat max-sm:hidden"
           style="background-image: url({{ $theme->previewImage ? asset($theme->previewImage) : bagisto_asset('images/default_theme_preview.png', 'visual_admin') }})"
         >
         </div>
-        <div class="relative w-full max-w-xs">
+        <div class="sm:hidden">
+          <img src="{{ $theme->previewImage ? asset($theme->previewImage) : bagisto_asset('images/default_theme_preview.png', 'visual_admin') }}">
+        </div>
+
+        <div class="relative w-full max-w-xs max-sm:p-4">
           <h3 class="text-2xl font-semibold">{{ $theme->name }}</h3>
 
           <div class="mt-2">