From 922b8b8cd7f16f0702002d8a0417452fa8874ec0 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Sat, 28 Sep 2024 18:36:00 +0530
Subject: [PATCH] update: design spec.

---
 .../database-[database]/backups/+page.svelte     |  8 +++++++-
 .../database-[database]/backups/policy.svelte    | 16 ++++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
index 2745a9d46..321292355 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
@@ -135,7 +135,7 @@
 <Container size="xxl">
     <div class="u-flex u-gap-32 u-flex-vertical-mobile">
         {#if !isDisabled}
-            <div class="u-flex-vertical">
+            <div class="u-flex-vertical policies-holder-card">
                 <ContainerHeader
                     title="Policies"
                     buttonText="Create policy"
@@ -242,4 +242,10 @@
         text-align: center;
         align-content: center;
     }
+
+    @media (min-width: 768px) {
+        .policies-holder-card {
+            max-width: 21.5rem;
+        }
+    }
 </style>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
index 37c3cc76b..daa1fe91d 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
@@ -98,8 +98,8 @@
 <div class="u-flex u-flex-vertical u-gap-16">
     <Card
         class="backups-policy-list-card u-margin-block-start-24"
-        style="--card-padding: 0.5rem; --card-padding-mobile: 0.5rem; min-width: 21.5rem;">
-        <div class="u-flex-vertical-mobile">
+        style="padding: 0; min-width: 21.5rem;">
+        <div class="inner-card u-flex-vertical-mobile">
             {#each policies.policies as policy, index (policy.$id)}
                 <div
                     class="policy-card-item-padding u-flex-vertical u-gap-10"
@@ -144,7 +144,7 @@
                     </div>
 
                     <div
-                        class="policy-cycles u-flex u-cross-center u-padding-block-2 policy-item-subtitles">
+                        class="policy-cycles u-flex u-main-space-between u-padding-block-2 policy-item-subtitles">
                         <div style="width: 128px" class="u-flex-vertical policy-item-caption">
                             <span style="color: #97979B">Previous</span>
                             <div
@@ -279,10 +279,14 @@
 </Modal>
 
 <style>
+    .inner-card {
+        margin: 0 -1px;
+        padding: 0.5rem;
+    }
+
     .u-border-vertical {
         width: 1px;
         height: 34px;
-        margin: 0 1.5rem;
         background-color: hsl(var(--color-border));
     }
 
@@ -331,10 +335,6 @@
         font-family: Inter;
     }
 
-    .policy-cycles {
-        margin-block: 0.125rem;
-    }
-
     :global(.input-check-box-friction .choice-item-title) {
         margin-block-start: 1px;
     }