From e61df14ec0b17b2efab8ff72785910c411f16d7a Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Mon, 8 Jun 2026 07:11:31 +0300
Subject: [PATCH] refactor: improve how cards look

---
 ui/app/components/Simple.vue       | 8 ++++----
 ui/app/pages/browser/[...slug].vue | 3 ++-
 ui/app/pages/conditions.vue        | 3 ++-
 ui/app/pages/dl_fields.vue         | 3 ++-
 ui/app/pages/history.vue           | 4 ++--
 ui/app/pages/index.vue             | 4 ++--
 ui/app/pages/notifications.vue     | 3 ++-
 ui/app/pages/presets.vue           | 3 ++-
 ui/app/pages/task_definitions.vue  | 3 ++-
 ui/app/pages/tasks.vue             | 3 ++-
 10 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/ui/app/components/Simple.vue b/ui/app/components/Simple.vue
index e1920452..19e17b97 100644
--- a/ui/app/components/Simple.vue
+++ b/ui/app/components/Simple.vue
@@ -205,7 +205,7 @@
                 <UCard
                   v-for="item in queueItems"
                   :key="`queue-${item._id}`"
-                  class="w-full min-w-0 max-w-full overflow-hidden border bg-default"
+                  class="w-full min-w-0 max-w-full overflow-hidden"
                   :ui="queueCardUi"
                 >
                   <template #header>
@@ -439,7 +439,7 @@
                 <UCard
                   v-for="item in historyEntries"
                   :key="`history-${historyPagination.page}-${item._id}`"
-                  class="w-full min-w-0 max-w-full overflow-hidden border bg-default"
+                  class="w-full min-w-0 max-w-full overflow-hidden"
                   :ui="queueCardUi"
                 >
                   <div class="flex min-w-0 flex-col gap-4 sm:flex-row">
@@ -756,14 +756,14 @@ const fieldUi = {
 };
 
 const formCardUi = {
-  root: 'w-full border bg-default',
+  root: 'w-full border border-default bg-default',
   container: 'w-full p-4 sm:p-5',
   wrapper: 'w-full items-stretch',
   body: 'w-full',
 };
 
 const queueCardUi = {
-  root: 'w-full',
+  root: 'w-full border border-default bg-default',
   header: 'p-4 pb-0',
   body: 'p-4',
 };
diff --git a/ui/app/pages/browser/[...slug].vue b/ui/app/pages/browser/[...slug].vue
index 3fca59c5..d08c2d72 100644
--- a/ui/app/pages/browser/[...slug].vue
+++ b/ui/app/pages/browser/[...slug].vue
@@ -323,8 +323,9 @@
       <UCard
         v-for="item in filteredItems"
         :key="item.path"
-        class="flex h-full flex-col border bg-default"
+        class="flex h-full flex-col"
         :ui="{
+          root: 'bg-default border border-default',
           header: 'p-4 pb-3',
           body: 'flex flex-1 flex-col gap-4 p-4 pt-0',
           footer: 'border-t border-default px-4 py-4',
diff --git a/ui/app/pages/conditions.vue b/ui/app/pages/conditions.vue
index 11c6d706..9937c14e 100644
--- a/ui/app/pages/conditions.vue
+++ b/ui/app/pages/conditions.vue
@@ -239,8 +239,9 @@
     <div v-else-if="filteredItems.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
       <div v-for="cond in filteredItems" :key="cond.id" class="min-w-0 w-full max-w-full">
         <UCard
-          class="flex h-full min-w-0 w-full max-w-full flex-col border bg-default"
+          class="flex h-full min-w-0 w-full max-w-full flex-col"
           :ui="{
+            root: 'bg-default border border-default',
             header: 'p-4 pb-3',
             body: 'flex flex-1 flex-col gap-4 p-4 pt-0',
             footer: 'border-t border-default px-4 py-4',
diff --git a/ui/app/pages/dl_fields.vue b/ui/app/pages/dl_fields.vue
index 293494d6..e12519fa 100644
--- a/ui/app/pages/dl_fields.vue
+++ b/ui/app/pages/dl_fields.vue
@@ -238,8 +238,9 @@
     <div v-else-if="filteredItems.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
       <div v-for="field in filteredItems" :key="field.id" class="min-w-0 w-full max-w-full">
         <UCard
-          class="flex h-full min-w-0 w-full max-w-full flex-col border bg-default"
+          class="flex h-full min-w-0 w-full max-w-full flex-col"
           :ui="{
+            root: 'bg-default border border-default',
             header: 'p-4 pb-3',
             body: 'flex flex-1 flex-col gap-4 p-4 pt-0',
             footer: 'border-t border-default px-4 py-4',
diff --git a/ui/app/pages/history.vue b/ui/app/pages/history.vue
index 0b6cf401..37d05ef1 100644
--- a/ui/app/pages/history.vue
+++ b/ui/app/pages/history.vue
@@ -377,12 +377,12 @@
           class="min-h-0 min-w-0 w-full max-w-full"
         >
           <UCard
-            class="flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden border"
+            class="flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden"
             :ui="{
               body: 'flex flex-1 flex-col gap-4 p-4',
               footer: 'border-t border-default px-4 py-4',
               header: 'p-4 pb-3',
-              root: 'bg-default',
+              root: 'bg-default border border-default',
             }"
           >
             <template #header>
diff --git a/ui/app/pages/index.vue b/ui/app/pages/index.vue
index 6f74011a..cbf541bc 100644
--- a/ui/app/pages/index.vue
+++ b/ui/app/pages/index.vue
@@ -399,12 +399,12 @@
             class="min-h-0 min-w-0 w-full max-w-full"
           >
             <UCard
-              class="flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden border"
+              class="flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden"
               :ui="{
                 body: 'flex flex-1 flex-col gap-4 p-4',
                 footer: 'border-t border-default px-4 py-4',
                 header: 'p-4 pb-3',
-                root: 'bg-default',
+                root: 'bg-default border border-default',
               }"
             >
               <template #header>
diff --git a/ui/app/pages/notifications.vue b/ui/app/pages/notifications.vue
index 17418781..db57ecd8 100644
--- a/ui/app/pages/notifications.vue
+++ b/ui/app/pages/notifications.vue
@@ -276,8 +276,9 @@
     <div v-else-if="filteredTargets.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
       <div v-for="item in filteredTargets" :key="item.id" class="min-w-0 w-full max-w-full">
         <UCard
-          class="flex h-full min-w-0 w-full max-w-full flex-col border bg-default"
+          class="flex h-full min-w-0 w-full max-w-full flex-col"
           :ui="{
+            root: 'bg-default border border-default',
             header: 'p-4 pb-3',
             body: 'flex flex-1 flex-col gap-4 p-4 pt-0',
             footer: 'border-t border-default px-4 py-4',
diff --git a/ui/app/pages/presets.vue b/ui/app/pages/presets.vue
index 76dbd518..428fb2e6 100644
--- a/ui/app/pages/presets.vue
+++ b/ui/app/pages/presets.vue
@@ -237,8 +237,9 @@
     <div v-else-if="filteredPresets.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
       <div v-for="item in filteredPresets" :key="item.id" class="min-w-0 w-full max-w-full">
         <UCard
-          class="flex h-full min-w-0 w-full max-w-full flex-col border bg-default"
+          class="flex h-full min-w-0 w-full max-w-full flex-col"
           :ui="{
+            root: 'bg-default border border-default',
             header: 'p-4 pb-3',
             body: 'flex flex-1 flex-col gap-4 p-4 pt-0',
             footer: 'border-t border-default px-4 py-4',
diff --git a/ui/app/pages/task_definitions.vue b/ui/app/pages/task_definitions.vue
index c0c00062..a2b16a54 100644
--- a/ui/app/pages/task_definitions.vue
+++ b/ui/app/pages/task_definitions.vue
@@ -267,8 +267,9 @@
         class="min-w-0 w-full max-w-full"
       >
         <UCard
-          class="flex h-full min-w-0 w-full max-w-full flex-col border bg-default"
+          class="flex h-full min-w-0 w-full max-w-full flex-col"
           :ui="{
+            root: 'bg-default border border-default',
             header: 'p-4 pb-3',
             body: 'flex flex-1 flex-col gap-4 p-4 pt-0',
             footer: 'border-t border-default px-4 py-4',
diff --git a/ui/app/pages/tasks.vue b/ui/app/pages/tasks.vue
index b264f47a..c97ea05f 100644
--- a/ui/app/pages/tasks.vue
+++ b/ui/app/pages/tasks.vue
@@ -340,8 +340,9 @@
     >
       <div v-for="item in filteredTasks" :key="item.id" class="min-w-0 w-full max-w-full">
         <UCard
-          class="flex h-full min-w-0 w-full max-w-full flex-col border bg-default"
+          class="flex h-full min-w-0 w-full max-w-full flex-col"
           :ui="{
+            root: 'bg-default border border-default',
             header: 'p-4 pb-3',
             body: 'flex flex-1 flex-col gap-4 p-4 pt-0',
             footer: 'border-t border-default px-4 py-4',